bootstrap-table：轻松实现复杂表头

1.效果图

2.实现方法

[code] <div class="col-sm-12 select-table table-bordered">
<table id="bootstrap-table" data-mobile-responsive="true"></table>
</div>

$(function () {
var options = {
url: prefix + "/list",
escape: true,
showPageGo: true,
rememberSelected: true,
columns: [[
{
title: '销售大区',
align: 'center',
rowspan: 3
}, {
title: '区域',
align: 'center',
rowspan: 3
}, {
title: '经销商',
align: 'center',
rowspan: 3
}, {
title: '期前欠款',
align: 'center',
colspan: 4
}, {
title: '2016年发车数量',
align: 'center',
rowspan: 3
}, {
title: '2016年销售明细',
align: 'center',
colspan: 12
}, {
title: '账上目前预付款',
align: 'center',
rowspan: 3
}, {
title: '截止2016年欠款',
align: 'center',
rowspan: 3
}, {
title: '2016收款',
align: 'center',
rowspan: 3
}
],
[{
field: 'userPhone',
title: '销售发车',
align: "center",
colspan: 3
}, {
field: 'userEmail',
title: '款转为2017年预付款',
align: "center",
rowspan: 2
}, {
field: 'userBalance',
title: '2016年合同货值',
align: "center",
colspan: 3
}, {
field: 'status',
title: '其他费用',
align: "center",
colspan: 3
}, {
title: '代付运费',
align: 'center',
colspan: 3
}, {
title: '2016年货后客户逾期)',
align: 'center',
colspan: 3
}
],
[{
field: 'userPhone',
align: "center",
title: '应收'
}, {
field: 'userEmail',
align: "center",
title: '实收'
}, {
field: 'userBalance',
align: "center",
title: '欠款'
}, {
field: 'status',
align: "center",
title: '应收'
}, {
align: 'center',
title: '实收'
}, {
field: 'userPhone',
align: "center",
title: '欠款'
}, {
field: 'userEmail',
align: "center",
title: '应收'
}, {
field: 'userBalance',
align: "center",
title: '实收'
}, {
field: 'status',
align: "center",
title: '欠款'
}, {
field: 'status',
align: "center",
title: '应收'
}, {
field: 'userPhone',
align: "center",
title: '实收'
}, {
field: 'userEmail',
align: "center",
title: '欠款'
}, {
field: 'userBalance',
align: "center",
title: '应收'
}, {
field: 'status',
align: "center",
title: '实收'
}, {
field: 'status',
align: "center",
title: '欠款'
}
]
]
};
$.table.init(options);
});