bootstrap-table组合表头

阅读更多

bootstrap-table组合表头

转载至:组合表头

1、效果图

2、HTML代码

<table id="table">table>
  • 1

3、js代码

$("#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"
                    }
                ]
            ]
        })
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68

columns中存放三组数组:

第一组数组存放的是表的标题信息,其中的colspan为整个表所有的列数

第二组存放的是表中第二行标题,其中field为name的字段是对应的跨行字段,该字段与mergeData.json中的name相对应,colspan与rowspan是该字段所占的列数与行数,其它字段与之类似

第三组存放的是表中的第三行标题,与mergeData.json中的数据相对应

4、mergeData.json

[
     {"name":"滚筒","mideaNum":"10","mideaPercent":"29%","panasonicNum":"10","panasonicPercent":"29%"},         {"name":"波轮","mideaNum":"9","mideaPercent":"28%","panasonicNum":"10","panasonicPercent":"29%"}
]
  • 1
  • 2
  • 3
 

你可能感兴趣的:(bootstrap-table组合表头)