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

前端之家收集整理的这篇文章主要介绍了bootstrap-table组合表头的实现方法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

1、效果

2、HTML代码

3、javascript代码

[ { "title": "洗衣机<a href="https://www.jb51.cc/tag/tongji/" target="_blank" class="keywords">统计</a>表","halign":"center","align":"center","colspan": 5 } ],[ { field: 'name',title: "<a href="https://www.jb51.cc/tag/gongneng/" target="_blank" class="keywords">功能</a>分组",valign:"middle",align:"center",colspan: 1,rowspan: 2 },{ title: "美的",colspan: 2,rowspan: 1 },{ title: "松下",rowspan: 1 } ],[ { field: 'mideaNum',title: '<a href="https://www.jb51.cc/tag/shuliang/" target="_blank" class="keywords">数量</a>',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

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

原文链接:https://www.f2er.com/bootstrap/36584.html

猜你在找的Bootstrap相关文章