bootstrap-table组合表头的实现方法

2019-11-19 15:31:03

字体：大中小

来源：转载

供稿：网友

最近需要做一个表格样式，需要组合表头，现在把做出来的分享给大家，

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%"} ]

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：阿里大于短信验证码node koa2的实现代码(最新)

下一篇：react-native-tab-navigator组件的基本使用示例代码