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

发布时间：2020-12-18 00:34:47 所属栏目：安全来源：网络整理

导读：最近需要做一个表格样式，需要组合表头，现在把做出来的分享给大家， 1、效果图 2、html代码 3、javascript代码 [ { "title": "洗衣机统计表","halign":"center","align":"center","colspan": 5 } ],[ { field: 'name',title: "功能分组",valign:"middle",al

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

1、效果图

2、html代码

3、javascript代码

    [
      {
        "title": "洗衣机统计表","halign":"center","align":"center","colspan": 5
      }
    ],[
      {
        field: 'name',title: "功能分组",valign:"middle",align:"center",colspan: 1,rowspan: 2
      },{
        title: "美的",colspan: 2,rowspan: 1
      },{
        title: "松下",rowspan: 1
      }
    ],[
      {
        field: 'mideaNum',title: '数量',align:"center"
      },{
        field: 'mideaPercent',title: '占比',{
        field: 'panasonicNum',{
        field: 'panasonicPercent',align:"center"
      }
    ]
  ]
})

columns中存放三组数组：

第一组数组存放的是表的标题信息，其中的colspan为整个表所有的列数

第二组存放的是表中第二行标题，其中field为name的字段是对应的跨行字段，该字段与mergeData.json中的name相对应，colspan与rowspan是该字段所占的列数与行数，其它字段与之类似

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

4、mergeData.json

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!