bootstrap table 分组_bootstrap-table组合表头的实现方法

最近需要做一个表格样式，需要组合表头，现在把做出来的分享给大家，

1、效果图

2、html代码

3、javascript代码

$("#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"

}

]

})

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%"}

]

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

bootstrap table 分组_bootstrap-table组合表头的实现方法相关推荐

bootstrapt 表格自适应_BootStrap table表格插件自适应固定表头(超好用)
首先是简单的页面形式,大家可以按照平常画表格的方式来创建html表格,然后通过js控制特殊的样式等操作(优点是表格更加直观,方便调整表格样式等,速度快) 当然,也可以只在页面上放一个table标签,之 ...
bootstraptable 加载完成_bootstrap table onLoadSuccess加载服务端数据成功事件
bootstrap table onLoadSuccess加载服务端数据成功事件 bootstrap table onLoadSuccess加载服务端数据成功的事件,该事件的作用是什么呢?服务端返回自 ...
layui数据表格自定义复选框表头_layui中table表头样式修改方法
如下所示: layui.use('table', function () { var table = layui.table; table.render({ elem: '#desTable' , u ...
layui表头样式_layui中table表头样式修改方法
如下所示: layui.use('table', function () { var table = layui.table; table.render({ elem: '#desTable' , u ...
layui表头样式_js相关：layui中table表头样式修改方法
js相关:layui中table表头样式修改方法发布于 2020-7-25| 复制链接分享一篇关于layui中table表头样式修改方法,具有很好的参考价值,希望对大家有所帮助.一起跟随小妖过来看 ...
头部固定悬浮table表头(thead)的方法 (实用、赞）
原文出处:https://www.cnblogs.com/circleline/p/7698249.html (思路见原文) 大概思路: 对页面滚动事件进行监听,当页面向上滚动,表头滚 ...
layui设置表格表头字体_layui中table表头样式修改方法
如下所示: layui.use('table', function () { var table = layui.table; table.render({ elem: '#desTable' , u ...
5种做法实现table表格中的斜线表头效果
table表格,这个东西大家肯定都不陌生,代码中我们时常都能碰到,那么给table加一个斜线的表头有时是很有必要的,但是到底该怎么实现这种效果呢? 我总结了以下几种方法: 1.最最最简单的做法直接去 ...
html：table表格如何实现斜线表头
今天分享下"html:table表格如何实现斜线表头"这篇文章,文中根据实例编码详细介绍,或许对大家的编程之路有着一定的参考空间与应用价值,需要的朋友接下来跟着云南仟龙Mark一起 ...

bootstrap table 分组_bootstrap-table组合表头的实现方法

bootstrap table 分组_bootstrap-table组合表头的实现方法相关推荐

最新文章

热门文章