先展示效果图
- 接下来就讲讲怎么实现这个效果
- 导入所需要的css和js包
复制代码
- 创建div元素
复制代码
- 在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": "总计", } ]复制代码 - 注意是通过改变colspan和rowspan进行行合并 以及列合并，在列配置项中可以添加class，然后自己再head中写样式来实现合并行和和并列之间的边框不显示
.moveleftboard { border-left: 0px solid transparent !important; } .moveRightboard { border-right: 0px solid transparent !important; }复制代码 - 表头有了，接下来就该添加数据了，我是通过url动态添加的，在bootstrapTable中添加url
url: "data.json",复制代码
- 下面是我的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 }]复制代码 - 在bootstrapTabl中配置treeShowField，这个属性表示哪一行需要树状显示
treeShowField: 'lb',复制代码
- 实现树形结构的关键就是treeShowField绑定的属性以及json文件中的id值和pid值，当下一行的pid值等于上一行的id值时，下一行就为上一行的子列。