bootstrap-table 實現表頭合併以及結合bootstrap-table-tree-column實現樹狀結構

先展現效果圖

• 接下來就講講怎麼實現這個效果

1. 導入所須要的css和js包

<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="node_modules/bootstrap-table/dist/bootstrap-table.css">
    <link rel="stylesheet" href="node_modules/bootstrap-table/dist/extensions/tree-column/bootstrap-table-tree-column.css">
    <script src="node_modules/jquery/dist/jquery.min.js"></script>
    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="node_modules/bootstrap-table/dist/bootstrap-table.js"></script>
    <script src="node_modules/bootstrap-table/dist/extensions/tree-column/bootstrap-table-tree-column.min.js"></script>
複製代碼

2. 建立div元素

<div id="table" class="table table-hover"></div>
複製代碼

3. 在js中動態生成表頭

columns: [
                    [
                        {
                            field: 'lb',
                            title: "類別",
                            valign: "middle",
                            align: "center",
                            colspan: 1,
                            rowspan: 4,
                            width: 200
                        },
                        {
                            field: "jgs",
                            title: "機構數 ",
                            valign: "middle",
                            align: "center",
                            colspan: 1,
                            rowspan: 4
                        },
                        {
                            field: 'zzlrcs',
                            title: '總診療人次數',
                            valign: "middle",
                            align: "center",
                            rowspan: 4
                        },
                        {
                            title: "",
                            valign: "middle",
                            align: "center",
                            colspan: 4,
                            rowspan: 1,
                            class: "moveleftboard"
                        },
                        {
                            field: 'gcs',
                            title: "觀察室",
                            valign: "middle",
                            align: "center",
                            colspan: 2,
                            rowspan: 1
                        },
                        {
                            field: 'jkjcrs',
                            title: "健康檢查人數",
                            valign: "middle",
                            align: "center",
                            colspan: 1,
                            rowspan: 4
                        },
                        {
                            field: 'mjzzzcd',
                            title: "門急診佔總次的（%）",
                            valign: "middle",
                            align: "center",
                            colspan: 1,
                            rowspan: 4
                        },
                        {
                            field: 'jzswl',
                            title: "急診死亡率",
                            valign: "middle",
                            align: "center",
                            colspan: 1,
                            rowspan: 4
                        },
                        {
                            field: 'gcsswl',
                            title: "觀察室死亡率",
                            valign: "middle",
                            align: "center",
                            colspan: 1,
                            rowspan: 4
                        }
                    ],
                    [
                        {
                            field: 'mjzrc',
                            title: '門急診人次',
                            valign: "middle",
                            align: "center",
                            rowspan: 3
                        },

                        {
                            field: '',
                            title: '',
                            valign: "middle",
                            align: "center",
                            colspan: 3,
                            class: "moveleftboard"
                        },
                        {
                            field: 'srrs',
                            title: '收容人數',
                            valign: "middle",
                            align: "center",
                            rowspan: 3
                        },
                        {
                            field: 'swl',
                            title: '死亡率',
                            valign: "middle",
                            align: "center",
                            rowspan: 3
                        }
                    ],
                    [

                        {
                            field: 'mzrc',
                            title: '門診人次',
                            valign: "middle",
                            align: "center",
                            colspan: 1,
                            rowspan: 2,
                            class: "123"
                        },
                        {
                            field: 'jzrc',
                            title: '急診人次',
                            valign: "middle",
                            align: "center",
                            rowspan: 2
                        },
                        {
                            field: '',
                            title: '',
                            valign: "middle",
                            align: "center",
                            colspan: 1,
                            class: "moveleftboard"
                        },

                    ],
                    [
                        {
                            field: 'swrs',
                            title: '死亡人數',
                            valign: "middle",
                            align: "center",
                            colspan: 1
                        }
                    ]
                ],
                 data: [
                     {
                        "id": 0,
                        "lb": "總計",
                    }
                 ]
複製代碼

4. 注意是經過改變colspan和rowspan進行行合併 以及列合併，在列配置項中能夠添加class，而後本身再head中寫樣式來實現合併行和和並列之間的邊框不顯示

.moveleftboard {
            border-left: 0px solid transparent !important;
        }

        .moveRightboard {
            border-right: 0px solid transparent !important;
        }
複製代碼

5. 表頭有了，接下來就該添加數據了，我是經過url動態添加的，在bootstrapTable中添加url

url: "data.json",
複製代碼

6. 下面是個人json數據

[
    {
        "id": 0,
       "lb":"總計",
       "jgs":114,
       "zzlrcs":555,
       "gcs":1254,
       "jkjcrs":444,
       "mjzzzcd":121,
       "jzswl":55,
       "gcsswl":787,
       "mjzrc":546,
       "srrs":46489,
       "swl":78979,
       "mzrc":464,
       "jzrc":7897,
       "swrs":778
    },
    {
        "id": 1,
       "lb":"醫院",
       "jgs":114,
       "zzlrcs":555,
       "gcs":1254,
       "jkjcrs":444,
       "mjzzzcd":121,
       "jzswl":55,
       "gcsswl":787,
       "mjzrc":546,
       "srrs":46489,
       "swl":78979,
       "mzrc":464,
       "jzrc":7897,
       "swrs":778
    },
    {
        "id": 21,
        "pid": 1,
       "lb":"綜合醫院",
       "jgs":114,
       "zzlrcs":555,
       "gcs":1254,
       "jkjcrs":444,
       "mjzzzcd":121,
       "jzswl":55,
       "gcsswl":787,
       "mjzrc":546,
       "srrs":46489,
       "swl":78979,
       "mzrc":464,
       "jzrc":7897,
       "swrs":778
    },
    {
        "id": 31,
       "pid": 1,
       "lb":"中醫醫院",
       "jgs":114,
       "zzlrcs":555,
       "gcs":1254,
       "jkjcrs":444,
       "mjzzzcd":121,
       "jzswl":55,
       "gcsswl":787,
       "mjzrc":546,
       "srrs":46489,
       "swl":78979,
       "mzrc":464,
       "jzrc":7897,
       "swrs":778
    },
    {
        "id": 4,
       "pid": 1,
       "lb":"專科醫院",
       "jgs":114,
       "zzlrcs":555,
       "gcs":1254,
       "jkjcrs":444,
       "mjzzzcd":121,
       "jzswl":55,
       "gcsswl":787,
       "mjzrc":546,
       "srrs":46489,
       "swl":78979,
       "mzrc":464,
       "jzrc":7897,
       "swrs":778
    }
]
複製代碼

7. 在bootstrapTabl中配置treeShowField，這個屬性表示哪一行須要樹狀顯示

treeShowField: 'lb',
複製代碼

8. 實現樹形結構的關鍵就是treeShowField綁定的屬性以及json文件中的id值和pid值，當下一行的pid值等於上一行的id值時，下一行就爲上一行的子列。

大功告成，更多內容能夠 參考官網