1. 程式人生 > >Bootstraptable建立父子表需要一個屬性detailView: true, //父子表 這樣就可以建立好父子表了

Bootstraptable建立父子表需要一個屬性detailView: true, //父子表 這樣就可以建立好父子表了

我自己寫的頁面程式碼。需要引入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

id="tb_agentService" class="tabletable-striped table_list" style="border-top:1px solid #cecece ;margin:10px 10px 15px 0px;">
</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"