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是该字段所占的列数与行数，其它字段与之类似

第三组存放的是表中的第三行标题，与mergeData.json中的数据相对应

4、mergeData.json

[
  {"name":"滚筒","mideaNum":"10","mideaPercent":"29％","panasonicNum":"10","panasonicPercent":"29％"},
  {"name":"波轮","mideaNum":"9","mideaPercent":"28％","panasonicNum":"10","panasonicPercent":"29％"}
]

来源：http://www.cnblogs.com/lhyhappy65/p/5871370.html