Bootstraptable建立父子表需要一個屬性detailView: true, //父子表 這樣就可以建立好父子表了
阿新 • • 發佈:2019-02-19
我自己寫的頁面程式碼。需要引入js
<script src="../../../js/common/jquery.min.js"></script>
<script src="../../../js/common/bootstrap.min.js"></script>
<script src="../../../js/common/bootstrap-table.js"></script> <script src="../../../js/common/bootstrap-table-zh-CN.js"></script>
<table
</table>
程式碼$(function() { var oTableInit = new Object(); var oInit = new Object(); $('#tb_agentService').bootstrapTable({ data: [ { "no": "FF21135", "type": "生產單元一", "name": "PVHI", "money": 35}, { "no": "FF21135", "type": "生產單元一", "name": "PVHI", "money": 35}, { "no": "FF21135", "type": "生產單元一", "name": "PVHI", "money": 35}, { "no": "FF21135", "type": "生產單元一", "name": "PVHI", "money": 35}, { "no": "FF21135", "type": "生產單元一", "name": "PVHI", "money": 35},{ "no": "FF21135", "type": "生產單元一", "name": "PVHI", "money": 35}, { "no": "FF21135", "type": "生產單元一", "name": "PVHI", "money": 35}, { "no": "FF21135", "type": "生產單元一", "name": "PVHI", "money": 35}, { "no": "FF21135", "type": "生產單元一", "name": "PVHI", "money": 35}, { "no": "FF21135", "type": "生產單元一", "name": "PVHI", "money": 35}, { "no": "FF21135", "type": "生產單元一", "name": "PVHI", "money": 35}, { "no": "FF21135", "type": "生產單元一", "name": "PVHI", "money": 35}, { "no": "FF21135", "type": "生產單元一", "name": "PVHI", "money": 35}, { "no": "FF21135", "type": "生產單元一", "name": "PVHI", "money": 35}, ], paginationPreText: '<', //上下翻頁paginationNextText: '>', detailView: true, //父子表striped: true, //是否顯示行間隔色pagination: true, //是否顯示分頁(*)sortOrder: "asc", //排序方式pageNumber: 1, //初始化載入第一頁,預設第一頁height: 400, pageSize: 10, //每頁的記錄行數(*)pageList: [10, 20], //可供選擇的每頁的行數(*)columns: [{ title: "序號", formatter: function(value, row, index) { return index + 1; }, rowspan: 1, align: 'center', width: '50px' },{ field: 'no', title: '位號', align: 'left', }, { field: 'type', title: '生產單元', align: 'left', }, { field: 'name', title: '報警標識', align: 'center', }, { field: 'money', title: '數量', align: 'right', } ], onExpandRow: function(index, row, $detail) { oTableInit.InitSubTable(index, row, $detail); } }); oTableInit.InitSubTable = function(index, row, $detail) { var parentid = row.MENU_ID; var cur_table = $detail.html('<table></table>').find('table'); $(cur_table).bootstrapTable({ data: [{ "no": "FF21135", "type": "生產單元一", "name": "PVHI", "money": 503, "time": "34.65", "matter": '98.05' }, { "no": "FF21135", "type": "生產單元一", "name": "PVHI", "money": 503, "time": "34.65", "matter": '98.05' }, { "no": "FF21135", "type": "生產單元一", "name": "PVHI", "money": 503, "time": "34.65", "matter": '98.05' }, { "no": "FF21135", "type": "生產單元一", "name": "PVHI", "money": 503, "time": "34.65", "matter": '98.05' }, { "no": "FF21135", "type": "生產單元一", "name": "PVHI", "money": 503, "time": "34.65", "matter": '98.05' }, { "no": "FF21135", "type": "生產單元一", "name": "PVHI"