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值时，下一行就为上一行的子列。

大功告成，更多内容能够 参考官网