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