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);

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

  1. 【SQL Server高可用性】数据库复制:SQL Server 2008R2中通过数据库复制,把A表的数据复制到B表

    原文:[SQL Server高可用性]数据库复制:SQL Server 2008R2中通过数据库复制,把A表的数据复制到B表 经常在论坛中看到有人问数据同步的技术,如果只是同步少量的表,那么可以考虑使 ...

  2. 数据结构中La表的数据合并到Lb表中

    实验描述:La表中的数据为(3,5,8,11)  Lb 表中的数据为(2,6,8,9,11,15,20) 将La表中的数据而不存在Lb表的数据插入到Lb表中,从而实现并集操作. 出现的问题:最后实现的 ...

  3. sql的存储过程实例--动态根据表数据复制一个表的数据到另一个表

    动态根据表数据复制一个表的数据到另一个表 把track表的记录 根据mac_id后两位数字,复制到对应track_? 的表中 如:mac_id=12345678910,则后两位10 对应表为track ...

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

    B表中的pid对应A表中id,查询A表中数据,根据b表中对应a表中该id的数据数目排序 select a.*,count(*) as c from a left join b on a.id=b.ai ...

  5. MySQL如果频繁的修改一个表的数据,那么这么表会被锁死。造成假死现象。

    MySQL如果频繁的修改一个表的数据,那么这么表会被锁死.造成假死现象. 比如用Navicat等连接工具操作,Navicat会直接未响应,只能强制关闭软件,但是重启后依然无效. 解决办法: 首先执行: ...

  6. [转]手把手教你--Bootstrap Table表格插件及数据导出(可导出Excel2003及Exce2007)

    原文地址:https://blog.csdn.net/javayoucome/article/details/80081771 1.介绍 Bootstrap Table介绍见官网:http://boo ...

  7. bootstrap table分页,重新数据查询时页码为当前页问题

    问题描述: 使用bootstrap table时遇到一个小问题,第一次查询数据未5页,翻页到第5页后,选中条件再次查询数据时,传到后端页码仍旧为5,而此时数据量小于5页,表格显示为未查询到数据. 处理 ...

  8. 关于mysql中修改某个字段类型,以及备份表中数据到新建的表中,从新建的表中移除数据到修改过的表中

    1:修改表中某个字段的类型 alter table usertable MODIFY dddd VARCHAR(50); 其中MODIFY是指修改表中字段的属性 alter表示修改表的意思 2:备份表 ...

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

    web开发中,我们经常需要将一个表的数据插入到另外一个表,有时还需要指定导入字段,设置只需要导入目标表中不存在的记录,虽然这些都可以在程序中拆分成简单sql来实现,但是用一个sql的话,会节省大量代码 ...

随机推荐

  1. groovy——运行方式、基本语法、引入方式、metaClass

    jvm运行groovy类有两种方式: 1.使用groovyc编译所有的*.groovy为java的*.class文件,把这些*.class文件放在java类路径中,通过java类加载器来加载这些类. ...

  2. Oracle RAC集群搭建(五)--oracle部署

    01,配置好环境 节点01--node1 ORACLE_BASE=/oracle/app/oracle ORACLE_HOME=$ORACLE_BASE/product//db_1 ORACLE_SI ...

  3. js动画实现&&回调地狱&&promise

    1. js实现动画 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  4. Oracle 基础系列之1.1 oracle的安装

    一. 1.以下是安装Oracle的一些硬件上的条件: (1).操作系统最后是windows2000(也就是服务器版的操作系统) (2).内存最好在1G以上,当然越大越好(因为Oracle服务启动就要消 ...

  5. tabs(标签页的现成页面)原生js写法

    直接上代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

  6. Task的一些用法总结

    一.Task和多线程以及异常的捕获示例代码: static void Main(string[] args) { // 产生CancellationToken的类,该类允许使用Cancel方法终止线程 ...

  7. 转帖:kindeditor编辑区空格被隐藏,导致所见所得不一致的解决办法

    1.修改kindereditor-all.js中的 var re = /(\s)<(/)?([\w-:]+)((?:\s+|(?:\s+[\w-:]+)|(?:\s+[\w-:]+=[^\s&q ...

  8. could not find an installed version of gradle either in android studio

    问题描述: 很多人在Ionic升级到3之后,无缘无故发现,当我们添加android平台后,build或者run的时候,命令行窗口给我们提示: 如果在Ionic2时add的android platfor ...

  9. Nginx反向代理、负载均衡功能

    环境: [root@db02 ~]# uname -a Linux db02 -.el6.x86_64 # SMP Tue Mar :: UTC x86_64 x86_64 x86_64 GNU/Li ...

  10. 2017年10月30日 vs初级教学

    Console.Write("Hello World!"); / / 插入 Hello World!            Console.WriteLine("Hell ...