bootstrap-table组合表头
转载至:组合表头
1、效果图
2、HTML代码
<table id="table"></table>
- 1
3、js代码
$("#table").bootstrapTable({
dataType: "json",
method: 'get',
contentType: "application/x-www-form-urlencoded",
cache: false,
url:"../data/mergeData.json",
columns:[
[
{
"title": "洗衣机统计表",
"halign":"center",
"align":"center",
"colspan": 5
}
],
[
{
field: 'name',
title: "功能分组",
valign:"middle",
align:"center",
colspan: 1,
rowspan: 2
},
{
title: "美的",
valign:"middle",
align:"center",
colspan: 2,
rowspan: 1
},
{
title: "松下",
valign:"middle",
align:"center",
colspan: 2,
rowspan: 1
}
],
[
{
field: 'mideaNum',
title: '数量',
valign:"middle",
align:"center"
},
{
field: 'mideaPercent',
title: '占比',
valign:"middle",
align:"center"
},
{
field: 'panasonicNum',
title: '数量',
valign:"middle",
align:"center"
},
{
field: 'panasonicPercent',
title: '占比',
valign:"middle",
align:"center"
}
]
]
})
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
columns中存放三组数组:
第一组数组存放的是表的标题信息,其中的colspan为整个表所有的列数
第二组存放的是表中第二行标题,其中field为name的字段是对应的跨行字段,该字段与mergeData.json中的name相对应,colspan与rowspan是该字段所占的列数与行数,其它字段与之类似
第三组存放的是表中的第三行标题,与mergeData.json中的数据相对应
4、mergeData.json
[
{"name":"滚筒","mideaNum":"10","mideaPercent":"29%","panasonicNum":"10","panasonicPercent":"29%"}, {"name":"波轮","mideaNum":"9","mideaPercent":"28%","panasonicNum":"10","panasonicPercent":"29%"}
]
- 1
- 2
- 3
相关推荐
最近需要对表头进行冻结,找到了bootstrap-table-fixed-columns组件(也是bootstrap-table作者写的)能实现冻结效果,但带来了其他问题,包括:排序失效、列宽错位、合并行无效等,于是引入该组件的同时,顺便解决了...
fastadmin 表格添加固定表头 bootstrap-table-fixed-columns所需插件
bootstrap-table头部错位已完美解决,兼容ie,火狐,谷歌浏览器(其它的浏览器没测),耗费了半个月的脑细胞终于解决,喜欢的朋友请点个赞,谢谢!
本篇文章主要介绍了bootstrap-table组合表头的实现方法,非常具有实用价值,需要的朋友可以参考下
使用bootstrap-table客户端分页生成表格,导出表格按照单元格内容相同合并单元格
[MVC]bootstrap-table表格ajax获取json数据并分页。
bootstrap-table是一个功能强大的table组件,支持分页、全文检索、导出等
bootstrap-table1.15.5版本,之前遇到表头不固定,跟着下滑,需要更新版本,这个版本可以解决表头不固定问题
bootstrap-table-fixed-header.js bootstrap-table-fixed-header.css 用于实现bootstrap冻结表头
主要介绍了bootstrap-table实现表头固定以及列固定的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2375行加上this.$header.outerHeight() 判断
bootstrap-table表头固定(全局)
Bootstrap table还有一个很多强大的功能,下面就通过本文给大家分享基于Bootstrap table组件实现多层表头的实例代码,需要的朋友参考下吧
修改bootstrap table设置列宽问题,增加插件和bootstrap table组合可随意拖动表格的列宽
在项目中使用这个js文件,使表头不再偏移...在测试中发现引用了bootstrap-table.js是没问题的,bootstrap-table.min.js是有问题的。在寻找解决表头偏移方法时可能下载了多个版本的js,也不确定该js是哪个版本,先放上来
利用一周的时间终于解决了,BootStrapTable 表格列头和内容不对其的问题。又需要的小伙伴来下载吧,替换原来的bootstrap-table.js即可
基于bootstrap的下拉框筛选,数据导入下拉框后,可输入数据查找筛选
知识点bootstrapTable 刷新和查询配置 2.提升js代码性能 1.减少全局变量声明 2.缓存dom节点查找结果 3.局部变量缓存全局变量 /** * @param col bootstrapTable列表生成配置对象 */ var searchValue ={};//查询...
Bootstrap Table是基于Bootstrap的轻量级表格插件,只需要简单的配置就可以实现强大的支持固定表头、单复选、排序、分页、搜索以及自定义表头等功能