Bootstrap Table表头合并
时间: 2017-11-15 15:41:49 来源:
先请大家看一下这篇文章的说明
内容基本上吧合并单元格的教程说明白了。
其实这里主要的区别就在于平时我们大多数使用的是一维数组
现在我们使用到的是二维数组 其中除了对应的数据列。其他定义的作为表头。
比如我们用如下的数据结构;
说明:这里用到了二维数组
数组里的第一个数组 用来 定义表头。
第二个数组可以看做一个细分的标题列。
在这里我们可以看到 其实作用和第一个数组一样。只是这里在合并单元格时除了进行colspan(夸列合并)。还进行 rowspan(夸行合并)
最后一个数组就是用来存放数据 的数组。
按照 这个思路其实大家可以做出自己想要的组合格式的表格。主要是注意二位数组的使用!!
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 })
说一个题外话
当我们不想给一个表格做分页时 需要注意把后端的rows 这个key 换成 data 这样bootstrap 才能够解析到。不然就要传一个 rows 和 一个total