bootstrap-table合并单元格组合表头

先看效果



html代码



先请大家看一下这篇文章的说明

内容基本上吧合并单元格的教程说明白了。

其实这里主要的区别就在于平时我们大多数使用的是一维数组

现在我们使用到的是二维数组 其中除了对应的数据列。其他定义的作为表头。

比如我们用如下的数据结构；

说明：这里用到了二维数组

数组里的第一个数组 用来 定义表头。

第二个数组可以看做一个细分的标题列。

在这里我们可以看到 其实作用和第一个数组一样。只是这里在合并单元格时除了进行colspan(夸列合并)。还进行 rowspan（夸行合并）

最后一个数组就是用来存放数据 的数组。  

按照 这个思路其实大家可以做出自己想要的组合格式的表格。主要是注意二位数组的使用！！

$("#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"
}
]
]
})

说一个题外话
当我们不想给一个表格做分页时 需要注意把后端的rows 这个key 换成 data 这样bootstrap 才能够解析到。不然就要传一个 rows 和 一个total

本文转载：http://www.cnblogs.com/xiawenyu/articles/7087496.html