首页 建站常识 详情

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


相关新闻

NASA顶级程序员编程的十大准则

如何用VS进行代码调试

程序员如何提升自己的竞争力

0.5913s