bootstrap-table組合表頭

1、效果圖

2、html代碼

 <table id="table"></table> 

3、javascript代碼

$("#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"
                    }
                ]
            ]
        })

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%"}
]

 注意：這里需要引用jquery.js 、bootstrap.js和bootstrap-table.js源文件，其中bootstrap-table.js文件的版本為version: 1.11.0，否則無法顯示正確的結果，同時若要表格的樣式顯示如上需要同時引入bootstrap.css和bootstrap-table.css文件