bootstrap table 主子表 局部数据刷新(刷新子表)

1、主表中设置data-detail-view="true",启用主子表模式:

<table class="table table-striped" width="80%" id="ds_table" align="center"
       striped="true"
       data-height="430" data-detail-view="true" data-detail-formatter="getChildTable"
       data-pagination="true" sidePagination="server" data-click-to-select="true">
    <thead>
2、JS动态创建子表,关键的是$detail.html(‘<table id="child_table"></table>‘).find(‘table‘);,这里创建了一个table,并给table设置了id,非常重要,不设置的话后续无法刷新子表:

 function getChildTable(index, row, $detail) {

        var parentid = row.tpno;
//        console.log(row);
        var cur_table = $detail.html(‘<table id="child_table"></table>‘).find(‘table‘);
        $(cur_table).bootstrapTable({
            url: ‘/etestpaper/getPaperQType‘,
            method: ‘get‘,
            queryParams: {strParentID: parentid},
            ajaxOptions: {strParentID: parentid},
            showFooter: true,
            columns: [
                 {
                    field: ‘questiontypename‘,
                    title: ‘题型名称‘,
                    align: ‘center‘,
                    footerFormatter:function () {
                        return ‘合计:‘;
                    }
                }, {
                    field: ‘questionnum‘,
                    title: ‘小题数量‘,
                    align: ‘center‘,
                    footerFormatter: function (value) {
                        var count = 0;
                        for (var i in value) {
                            count += value[i].questionnum;
                        }
                        return count;
                    }
                }, {
                    field: ‘mark‘,
                    title: ‘题型分值‘,
                    align: ‘center‘,
                    footerFormatter: function (value) {

                        var count = 0;
                        for (var i in value) {
//                            console.log(value[i].mark);
                            count += value[i].mark;
                        }
                        return count;
                        console.log(count);
                    }
                },{
                    title: ‘操作‘,
                    field: ‘c_id‘,
                    align: ‘center‘,
                    formatter: childFormatter(),
                    events: operateEvent
                },
            ],
            //无线循环取子表,直到子表里面没有记录
            onExpandRow: function (index, row, $Subdetail) {
                getChildTalbe(index, row, $Subdetail);
            }
        });
    }

3、完成添加或修改操作后,可以直接对子表进行刷新了,我这里重新查询了数据并绑定到子表(应该可以有更好的办法,可以试试不执行查询、直接刷新当前子表):


$("#child_table").bootstrapTable(‘refresh‘, data.data);

原文地址:https://www.cnblogs.com/telwanggs/p/8591743.html

时间: 2024-10-24 23:11:15

bootstrap table 主子表 局部数据刷新(刷新子表)的相关文章

第二阶段 MySQL函数库 表中数据查询与多表操作

一位初学php的随堂笔记,记录自己的成长! 一.表结构的修改(DDL) 1.添加表结构的字段 a.ALTER TABLE 表名 ADD 字段名 数据类型 [字段属性|约束条件] [FIRST|AFTER 字段名]: b. 添加多个字段 ALTER TABLE 表名 ADD 字段名 数据类型 [字段属性|约束条件] [FIRST|AFTER 字段名], ADD 字段名 数据类型 [字段属性|约束条件] [FIRST|AFTER 字段名]...: 2 删除字段 ALTER TABLE 表名 DROP

mysql表ibdata1数据切换到单个表储存、默认导出的表结构

释放MySQL ibdata1文件的空间 mysqldump选项: --add-drop-table:在每个创建数据库表语句前添加删除数据库表的语句: --add-locks:备份数据库表时锁定数据库表: --all-databases:备份MySQL服务器上的所有数据库: --comments:添加注释信息: --compact:压缩模式,产生更少的输出: --complete-insert:输出完成的插入语句: --databases:指定要备份的数据库: --default-charact

Sqoop1.4.4将MySQL数据库表中数据导入到HBase表中

问题导读:         1.--hbase-table.--hbase-row-key.--column-family及--hbase-create-table参数的作用? 2.Sqoop将关系型数据库表中数据导入HBase中,默认Rowkey是什么? 3.如果关系型数据库表中存在多关键字,该怎么办? 一.简介及部分重要参数介绍 Sqoop除了能够将数据从关系型数据库导入到HDFS和Hive中,还能够导入到HBase表中. --hbase-table:通过指定--hbase-table参数值

MySQL 数据库中如何把A表的数据插入到B表?

web开发中,我们经常需要将一个表的数据插入到另外一个表,有时还需要指定导入字段,设置只需要导入目标表中不存在的记录,虽然这些都可以在程序中拆分成简单sql来实现,但是用一个sql的话,会节省大量代码. 以mysql数据库为例分情况一一说明: 两张表:insertTest和insertTest2,前者中有测试数据 create table insertTest(id int(4),name varchar(12));insert into insertTest values(100,'tom')

Oracle数据库表空间 数据文件 用户 以及表创建的SQL代码

--create the tablespace CREATE SMALLFILE TABLESPACE "TABLE_CONTAINER" --创建表空间 DATAFILE 'E:\ORACLE\ORADATA\ORCL\table_01.DBF' --建立数据文件,数据文件的文件位置 SIZE 100M --数据文件的初始大小 AUTOEXTEND ON NEXT 100M --数据文件增量大小 MAXSIZE UNLIMITED --数据文件大小无限制 LOGGING EXTENT

ssh框架提交表单数据后,数据库表出现问号?的解决方法

解决方法如下:连接数据库的时候需要指定编码方式,如下所示: jdbc.url = jdbc:mysql:///dbName?useUnicode=true&characterEncoding=UTF-8

B表中的pid对应A表中id,查询A表中数据,根据b表中对应a表中该id的数据数目排序

select a.*,count(*) as c from a left join b on a.id=b.aid group by a.id ORDER BY c desc

011杰信-创建购销合同Excel报表系列-3-建立合同货物(修改,删除):合同货物表是购销合同表的子表

前面的一篇文章做的是修改删除,这篇文章做的是合同货物的修改和删除. 业务功能如下: 进入上面页面后,有删除和修改两个链接.项目结构如下: 上面的红色框框就是这个功能的代码结构: 我们还是按照Mapper.xml文件->Dao层->Service层->控制层. COntractProductMapper.xml代码如下: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE mapper

Bootstrap分页插件ajax返回数据,工具类的编写

使用Bootstrap分页插件时,需要返回指定的参数,这样Bootstrap才能够识别 需要引入的css: <!-- boostrap table --> <link href="css/bootstrap-table.min.css" rel="stylesheet" /> 需要引入的js: 1 <!-- boostrap table --> 2 <script type="text/javascript&quo