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": 5 15 } 16 ], 17 [ 18 { 19 field: ‘name‘, 20 title: "功能分组", 21 valign:"middle", 22 align:"center", 23 colspan: 1, 24 rowspan: 2 25 }, 26 { 27 title: "美的", 28 valign:"middle", 29 align:"center", 30 colspan: 2, 31 rowspan: 1 32 }, 33 { 34 title: "松下", 35 valign:"middle", 36 align:"center", 37 colspan: 2, 38 rowspan: 1 39 } 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 ]
时间: 2024-10-27 00:10:06