看到好多bootstrap-table父子表的文章，都表述的不是很清楚，所以贴出了自己觉得比较易懂的代码，以做记录
如果每张表都想有子表,要把detailView设为true
数据子表如果在服务器拿的时候，必须把sidePagination 改为 server，不然子表没数据
var oTableInit = new Object();
var oInit = new Object();
$table.bootstrapTable({
url: "/pay/list/ment",
paginationLoop: false,
smartDisplay: false,
sidePagination: "server",
pagination: true,
paginationPreText: "上一页",
paginationNextText: "下一页",
clickToSelect: true,
pageNumber: 1,
pageSize:10,
uniqueId: 'payNo',
showFooter: false,
columns: [{
formatter: function (value, row, index) {
return index+1
},
},{
field: 'payNo',
title: '进货单号',
footerFormatter: totalTextFormatter
}, {
field: 'priceStore',
title: '门市价总额(元)',
footerFormatter: totalTextFormatter
}, {
field: 'totalMoney',
title: '实售总额(元)',
footerFormatter: totalTextFormatter
}, {
field: 'name',
title: '所属门店',
footerFormatter: sumFormatter
}, {
field: 'creatDate',
title: '创建时间',
footerFormatter: sumFormatter
}, {
field: 'address',
title: '收货地址',
footerFormatter: totalTextFormatter
}, {
field: 'state',
title: '厂家审核状态',
footerFormatter: totalTextFormatter
}, {
field: 'paymenRate',
title: '已付(%)',
footerFormatter: totalTextFormatter
}, {
field: 'payNo',
title: '添加付款信息',
formatter: function (value, row, index) {
return '<a class="btn btn-success add" value="'+value+'" href="javascript:void(0)">添加</a>'
},
footerFormatter: totalTextFormatter
},{
field: 'payNo',
title: '查看',
formatter: function (value, row, index) {
return '<a class="btn btn-info query" value="'+value+'" href="javascript:void(0)">查看</a>'
},
footerFormatter: totalTextFormatter
},{
field: 'payNo',
title: '删除',
formatter: function (value, row, index) {
return '<a class="btn btn-warning del" value="'+value+'" href="javascript:void(0)">删除</a>'
},
footerFormatter: totalTextFormatter
},],
detailView:true,
onExpandRow:function(index, row, $detail) {
oTableInit.InitSubTable(index, row, $detail);
}
});
oTableInit.InitSubTable = function(index, row, $detail) {
var payNo = row.payNo
var cur_table = $detail.html('<table></table>').find('table');
$(cur_table).bootstrapTable({
url:'/pay/ment/list?payNo='+payNo,
pagination:false,
sidePagination: "server",
dataType:'json',
detailView:true,//父子表
uniqueId: "salesNo",
columns: [{
formatter: function (value, row, index) {
return index + 1
},
}, {
field: 'salesNo',
title: '订单号',
}, {
field: 'userName',
title: '顾客名称',
}, {
field: 'phone',
title: '手机号',
}, {
field: 'priceStore',
title: '订单门市金额(元)',
}, {
field: 'totalMoney',
title: '订单实售金额(元)',
}, {
field: 'createDate',
title: '创建时间',
}, {
field: 'operName',
title: '操作员',
}, {
field: 'stateName',
title: '订单状态',
}, {
field: 'paymenRate',
title: '已付(%)',
}, {
field: 'orderRemark',
title: '订单备注',
formatter: function (value, row, index) {
var remark = value==undefined?'':value
return '<p title="'+remark+'">查看备注</p>'
}
} ],
onExpandRow: function (index, row, $Subdetail) {
oInit.InitSubTable(index, row, $Subdetail);
}
});
return oTableInit;
};
oInit.InitSubTable = function(index, row, $detail) {
var salesNo = row.salesNo
var cur_table = $detail.html('<table></table>').find('table');
$(cur_table).bootstrapTable({
url:'/order/list/detail?salesNo='+salesNo,
pagination:false,
sidePagination: "server",
dataType:'json',
showFooter: true,
//detailView:true,//父子表
columns: [{
field: 'id',
formatter: function (value,row,index) {
return index +1;
},
footerFormatter: totalTextFormatter
}, {
field: 'name',
title: '单品名称',
footerFormatter: totalTextFormatter
}, {
field: 'price1',
title: '单价',
footerFormatter: priceFormatter
}, {
field: 'priceSales',
title: '实售单价',
footerFormatter: priceFormatter
}, {
field: 'unit',
title: '单位',
footerFormatter: totalTextFormatter
}, {
field: 'formerGoodsNo',
title: '货号',
footerFormatter: totalTextFormatter
},{
field: 'categoryName',
title: '单品类别',
footerFormatter: totalTextFormatter
}, {
field: 'amount',
title: '单品数量',
footerFormatter: sumFormatter
}, {
field: 'priceSales',
title: '销售折扣',
formatter: function (value, row, index) {
var type = "<span>" + ((row.priceSales / row.price1) * 100).toFixed(2) + "%</span>"
return type
},
footerFormatter: totalTextFormatter
},],
onExpandRow: function (index, row, $Subdetail) {
//oInit.InitSubTable(index, row, $Subdetail); //可无限循环
}
});
return oTableInit;
};
Math.formatFloat = function (f, digit) {
var m = Math.pow(10, digit);
return parseInt(f * m, 10) / m;
}
function runningFormatter(value, row, index) {
return index;
}
function totalTextFormatter(data) {
return '--';
}
function totalFormatter(data) {
return data.length;
}
function priceFormatter(data) {
field = this.field;
return data.reduce(function (sum, row) {
var ro = row[field]
var ram = row.amount
return Math.formatFloat(sum + (+ro * ram), 2);
}, 0);
}
function sumFormatter(data) {
field = this.field;
return data.reduce(function (sum, row) {
return sum + (+row[field]);
}, 0);
}
function avgFormatter(data) {
return sumFormatter.call(this, data) / data.length;
}如有不对的地方，请指正，谢谢
版权声明：本文为qq_20309705原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。