bootstrap-table合并单元格组合表头
2017-07-17 16:56
3207 查看
先看效果
![](https://oscdn.geek-share.com/Uploads/Images/Content/202006/01/f21ab242a125f81468fb9639f6187915)
html代码
![](https://oscdn.geek-share.com/Uploads/Images/Content/202006/01/1f31682fc185a78e260a15a66e2433db)
先请大家看一下这篇文章的说明
内容基本上吧合并单元格的教程说明白了。
其实这里主要的区别就在于平时我们大多数使用的是一维数组
现在我们使用到的是二维数组 其中除了对应的数据列。其他定义的作为表头。
比如我们用如下的数据结构;
说明:这里用到了二维数组
数组里的第一个数组 用来 定义表头。
第二个数组可以看做一个细分的标题列。
在这里我们可以看到 其实作用和第一个数组一样。只是这里在合并单元格时除了进行colspan(夸列合并)。还进行 rowspan(夸行合并)
最后一个数组就是用来存放数据 的数组。
按照 这个思路其实大家可以做出自己想要的组合格式的表格。主要是注意二位数组的使用!!
$("#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"
}
]
]
})
本文转载:http://www.cnblogs.com/xiawenyu/articles/7087496.html
html代码
先请大家看一下这篇文章的说明
内容基本上吧合并单元格的教程说明白了。
其实这里主要的区别就在于平时我们大多数使用的是一维数组
现在我们使用到的是二维数组 其中除了对应的数据列。其他定义的作为表头。
比如我们用如下的数据结构;
说明:这里用到了二维数组
数组里的第一个数组 用来 定义表头。
第二个数组可以看做一个细分的标题列。
在这里我们可以看到 其实作用和第一个数组一样。只是这里在合并单元格时除了进行colspan(夸列合并)。还进行 rowspan(夸行合并)
最后一个数组就是用来存放数据 的数组。
按照 这个思路其实大家可以做出自己想要的组合格式的表格。主要是注意二位数组的使用!!
$("#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"
}
]
]
})
说一个题外话 当我们不想给一个表格做分页时 需要注意把后端的rows 这个key 换成 data 这样bootstrap 才能够解析到。不然就要传一个 rows 和 一个total
本文转载:http://www.cnblogs.com/xiawenyu/articles/7087496.html
相关文章推荐
- bootstrap-table 表头或组合表头,和内容无法对齐的问题
- bootstrap-table组合表头
- bootstrap 表头组合
- bootstrap-table组合表头的实现方法
- 分类器组合方法Bootstrap, Boosting, Bagging, 随机森林(一)
- Bootstrap 教程第六课:各种按钮组合样式
- Datatables + Bootstrap 组合基础示例 2
- Bootstrap与tab组合,切换菜单实例
- bootstrap-table表头固定,表内容不对齐的另类解决方法
- bootstrap中固定table的表头
- 4.1、组合方法一Bootstrap、bagging和boosting
- Bootstrap Table使用整理(五)之分页组合查询
- Datatables + Bootstrap 组合基础示例 1
- bootstrap-table 插件 表头与内容不对齐 解决方式
- bootstrap-table 表头数据展示错位
- bootstrap-table 表头和内容对不齐解决办法
- bootstrap 表格表头固定
- bootstrap-table设置表头宽度无效的解决方案
- bootstrap-table 表头和内容对不齐
- html bootstrap 表头固定在顶部,表列 可以自由滚动的效果