bootstrap-table組合表頭
效果圖
先請大家看一下這篇文章的說明
內容基本上吧合並單元格的教程說明白了。
其實這里主要的區別就在於平時我們大多數使用的是一維數組
現在我們使用到的是二維數組 其中除了對應的數據列。其他定義的作為表頭。
比如我們用如下的數據結構；
說明：這里用到了二維數組
數組里的第一個數組 用來 定義表頭。
第二個數組可以看做一個細分的標題列。
在這里我們可以看到 其實作用和第一個數組一樣。只是這里在合並單元格時除了進行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