bootstrap-table组合表头的实现方法组合表头的实现方法
本篇文章主要介绍了bootstrap-table组合表头的实现方法,非常具有实用价值,需要的朋友可以参考下
最近需要做一个表格样式,需要组合表头,现在把做出来的分享给大家,
1、效果图、效果图
2、、html代码代码
<table id="table"></table>
3、、javascript代码代码
$("#table").bootstrapTable({
dataType: "json",
method: 'get',
contentType: "application/x-www-form-urlencoded",
cache: false,
url:"../data/mergeData.json",
columns:[
[
{
"title": "洗衣机统计表",
"halign":"center",
"align":"center",
"colspan": 5
}
],
[
{
field: 'name',
title: "功能分组",
valign:"middle",
align:"center",
colspan: 1,
rowspan: 2
},
{
title: "美的",
valign:"middle",
align:"center",
colspan: 2,
rowspan: 1
},
{
title: "松下",
valign:"middle",
align:"center",
colspan: 2,
rowspan: 1
}
],
[
{
field: 'mideaNum',
title: '数量',
valign:"middle",
align:"center"
},
{
field: 'mideaPercent',
title: '占比',
valign:"middle",
align:"center"
},
{
field: 'panasonicNum',
title: '数量',
valign:"middle",
align:"center"
},
{
field: 'panasonicPercent',
title: '占比',
valign:"middle",
align:"center"
}
]
]
})
columns中存放三组数组:
第一组数组存放的是表的标题信息,其中的colspan为整个表所有的列数
第二组存放的是表中第二行标题,其中field为name的字段是对应的跨行字段,该字段与mergeData.json中的name相对应,colspan与rowspan是该字段所占的列数与
评论0