效果图
先请大家看一下这篇文章的说明
内容基本上吧合并单元格的教程说明白了。
其实这里主要的区别就在于平时我们大多数使用的是一维数组
现在我们使用到的是二维数组 其中除了对应的数据列。其他定义的作为表头。
比如我们用如下的数据结构；
说明：这里用到了二维数组
数组里的第一个数组 用来 定义表头。
第二个数组可以看做一个细分的标题列。
在这里我们可以看到 其实作用和第一个数组一样。只是这里在合并单元格时除了进行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