bootstrap-table组合表头
2017-04-09 00:17
471 查看
bootstrap-table组合表头
1、效果图
回到顶部
2、html代码
1 <tableid="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 ]
相关文章推荐
- bootstrap-table组合表头的实现方法
- bootstrap-table 表头或组合表头,和内容无法对齐的问题
- bootstrap-table设置表头宽度无效的解决方案
- 好用的自适应表格插件-bootstrap table (支持固定表头)
- bootstrap固定table表头
- BootStrapTable.js 表头与内容无法对齐
- bootstrap-table 表头和内容对不齐解决办法
- bootstrap-table 表头和内容宽度不一致解决办法
- bootstrap Table表头固定
- [置顶] bootstrap-table固定表头,同时适配高度,固定列解决方案
- [置顶] bootstrap-table固定表头,同时适配高度,兼容ie,checkbox,固定列解决方案(续)
- bootstrap-table表头固定,表内容不对齐的问题
- bootstrap-table 表头数据展示错位
- Bootstrap-table:轻松实现多层表头
- bootstrap-table+多行数据组合提交(java版)
- bootstrap固定table表头
- bootstrap-table表头固定,表内容不对齐的另类解决方法
- bootstrap中固定table的表头
- Bootstrap Table使用整理(五)之分页组合查询
- bootstrap-table 表头和内容对不齐