首页 > 代码库 > bootstrap-table组合表头
bootstrap-table组合表头
1、效果图
2、html代码
1 <table id="table"></table>
3、javascript代码
1 $("#table").bootstrapTable({ 2 dataType: "json", 3 method: ‘get‘, 4 contentType: "application/x-www-form-urlencoded", 5 cache: false, 6 url:"../data/mergeData.json", 7 columns:[ 8 9 [10 {11 "title": "洗衣机统计表",12 "halign":"center",13 "align":"center",14 "colspan": 515 }16 ],17 [18 {19 field: ‘name‘,20 title: "功能分组",21 valign:"middle",22 align:"center",23 colspan: 1,24 rowspan: 225 },26 {27 title: "美的",28 valign:"middle",29 align:"center",30 colspan: 2,31 rowspan: 132 },33 {34 title: "松下",35 valign:"middle",36 align:"center",37 colspan: 2,38 rowspan: 139 }40 ],41 [42 {43 field: ‘mideaNum‘,44 title: ‘数量‘,45 valign:"middle",46 align:"center"47 },48 {49 field: ‘mideaPercent‘,50 title: ‘占比‘,51 valign:"middle",52 align:"center"53 },54 {55 field: ‘panasonicNum‘,56 title: ‘数量‘,57 valign:"middle",58 align:"center"59 },60 {61 field: ‘panasonicPercent‘,62 title: ‘占比‘,63 valign:"middle",64 align:"center"65 }66 ]67 ]68 })
columns中存放三组数组：
第一组数组存放的是表的标题信息，其中的colspan为整个表所有的列数
第二组存放的是表中第二行标题，其中field为name的字段是对应的跨行字段，该字段与mergeData.json中的name相对应，colspan与rowspan是该字段所占的列数与行数，其它字段与之类似
第三组存放的是表中的第三行标题，与mergeData.json中的数据相对应
4、mergeData.json
1 [2 {"name":"滚筒","mideaNum":"10","mideaPercent":"29%","panasonicNum":"10","panasonicPercent":"29%"},3 {"name":"波轮","mideaNum":"9","mideaPercent":"28%","panasonicNum":"10","panasonicPercent":"29%"}4 ]
bootstrap-table组合表头
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。