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