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