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 ]
注意：这里需要引用jquery.js 、bootstrap.js和bootstrap-table.js源文件，其中bootstrap-table.js文件的版本为version: 1.11.0，否则无法显示正确的结果，同时若要表格的样式显示如上需要同时引入bootstrap.css和bootstrap-table.css文件