bootstrap-table 实现表头合并以及结合bootstrap-table-tree-column实现树状结构

最新推荐文章于 2024-04-26 17:28:35 发布
最新推荐文章于 2024-04-26 17:28:35 发布
阅读量3.5k 收藏 1
点赞数
文章标签： json javascript ViewUI
原文链接：https://juejin.im/post/5c10a711e51d4504bc5e4bdd
版权

先展示效果图

  • 接下来就讲讲怎么实现这个效果
  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>
复制代码
  1. 创建div元素
<div id="table" class="table table-hover"></div>
复制代码
  1. 在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": "总计",
                    }
                 ]
复制代码
  1. 注意是通过改变colspan和rowspan进行行合并 以及列合并，在列配置项中可以添加class，然后自己再head中写样式来实现合并行和和并列之间的边框不显示
  .moveleftboard {
            border-left: 0px solid transparent !important;
        }

        .moveRightboard {
            border-right: 0px solid transparent !important;
        }
复制代码
  1. 表头有了，接下来就该添加数据了，我是通过url动态添加的，在bootstrapTable中添加url
    url: "data.json",
复制代码
  1. 下面是我的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
    }
]
复制代码
  1. 在bootstrapTabl中配置treeShowField，这个属性表示哪一行需要树状显示
  treeShowField: 'lb',
复制代码
  1. 实现树形结构的关键就是treeShowField绑定的属性以及json文件中的id值和pid值，当下一行的pid值等于上一行的id值时，下一行就为上一行的子列。

大功告成，更多内容可以 参考官网

转载于:https://juejin.im/post/5c10a711e51d4504bc5e4bdd

weixin_34037515
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS树形表格（可分级展开）
04-10
otreetable.js 原生JS树形表格，调用非常简单（只需一句代码即可调用），获取HTML中输出的表格数据重构表格，以树形方式显示，可展开/收缩，不破坏表格原有数据格式及内容，支持无限级，兼容所有浏览器。当前版本支持分级展开、收缩。
Bootstrap Table API 中文版（完整翻译文档）
热门推荐
Sclifftop - 保安大队长
09-11 16万+
>Bootstrap table API 中文文档（完整翻译文档） *$('#table').bootstrapTable({}); *看网上有中文版的，但有些就是字面直接译过来了，而且有的就没有翻译，那就打算自己再翻译一遍，每一条会尽 *最大可能结合尽可能多资料翻译，如果发现译的内容比英文多，是添加了更详细的说明，表的名称，属性，类型，
bootstrap-table 多层组合表头
User_Lily的博客
03-01 430
bootstrap-table 多层组合表头
Bootstrap-table组合表头
weixin_30919919的博客
09-01 292
写在前面： 　　当表格有多个表头需要进行组合的时候，这个时候就需要用到列的多维数组来实现了。由于项目中并没有涉及到太多，这里就不再写demo了，可以直接参考其他人写的博客，写的比较好。 　　 　　相关参考连接：（bootstrap-table表头组合）https://www.cnblogs.com/lhyhappy65/p/5871370.html 转载于:https://www.cn...
bootstraptable合并标题_Bootstrap-table 单元格合并 、表头合并
weixin_29928971的博客
01-14 647
1.页面引入js/css@*1、Jquery组件引用*@@*2、bootstrap组件引用*@@*3、bootstrap table组件以及中文包的引用*@2.页面定义一个table3.初始化js文件function initTable() {$('#table').bootstrapTable('destroy');$('#table').bootstrapTable({url: ctx + '...
bootstrap的table插件动态加载表头【表头】。
Abubu123的博客
09-22 4万+
bootstrap的table属性已经很熟悉了，最近遇到一个问题，犹豫每个列表加载的数据需求不同，所以需要动态的更换表头。 网上有很多加载表格数据的例子，但是却没有找到如何动态加载表格，再加在数据。 虽然可以一个表格加载一种数据，但是本着学习的态度尝试了下这种方式，结果发现是可以执行的。分享下思路和实现过程，以备日后使用。思路：1、写接口，查询出要展示的列。注意接口中必须要有字段中文名称（colu...
bootstrapTabale复杂表头+列合并
占星安啦的博客
01-03 1万+
//必须设置高度，否则无法固定表头 height:$(document).height()-170, columns : [[ {title: '', field: '', align: 'center', formatter: function (value, row, index) { ...
bootstrap-table组合表头,bootstrap table实现横向合并
逗号ing的博客
07-24 2317
1 $("#table").bootstrapTable({ 2 dataType: "json", 3 method: 'get', 4 contentType: "application/x-www-form-urlencoded", 5 cache: false, 6 ...
bootstraptable合并标题_bootstraptable合并标题_bootstrapTable 合并单元格
weixin_39744408的博客
02-23 211
/*** 合并单元格* @param data 原始数据(在服务端完成排序)* @param fieldName 合并属性名称* @param colspan 合并列* @param target 目标表格对象*/function mergeCells(data,fieldName,colspan,target){//声明一个map计算相同属性值在data对象出现的次数和var sortMap =...
bootstraptable合并列
somdip的博客
07-14 1031
合并列
bootstarp 表头合并组合
落日流年
10-24 660
$('#dataGrid1').bootstrapTableEx({ url: '../../schoolGrade/statistic?_' + $.now(), height: $(window).height() - 90, pagination: false, queryParams: function (params) { params....
bootstrap-table组合表头的实现方法
08-29
本篇文章主要介绍了bootstrap-table组合表头的实现方法，非常具有实用价值，需要的朋友可以参考下
bootstrap-table实现表头固定以及列固定的方法示例
10-17
主要介绍了bootstrap-table实现表头固定以及列固定的方法示例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
基于bootstrap-table 实现 右侧列固定
08-14
基于bootstrap-table 实现 右侧列固定，也可以针对左侧列固定，针对操作列使用起来非常方便，引用jquery、bootstrap-table-fixed 样式和js文件后，可以随意设置，灵活。 fixedColumns: true,//fixedtNumber:2, //...
Node框架Express搭建服务器和API
qq_25953937的博客
04-25 124
Node框架Express搭建服务器和API
Mac运行npm run serve报错opensslErrorStack
qq_33415990的博客
04-26 165
mac电脑运行npm run serve报错 报错opensslErrorStack
vue.config.js自定义插件和自定义vue-cli-service命令
最新发布
lyj168997的博客
04-26 105
自定义vue-cli-service命令。
Kubernetes JSONpath如何使用？
duansamve的博客
04-21 355
你可以使用 JSONPath 表达式来组合多个字段，并自定义输出格式。这条命令将返回 Pod 名称和 IP 地址，它们之间用制表符（\t）分隔，每个 Pod 的信息占一行。
react-bootstrap-table-next怎么合并单元格
05-31
要合并单元格，需要使用 `react-bootstrap-table-next` 中的 `rowSpan` 和 `colSpan` 属性。这些属性可以在 `columns` 对象中定义，用于指定表格中每个单元格应该跨越的行和列的数量。 具体的实现步骤如下： 1. 在 `columns` 对象中定义需要合并单元格的列，为其添加 `rowSpan` 和 `colSpan` 属性。 2. 在 `data` 数组中为需要合并单元格的行添加相应的属性值，这些属性值将在表格渲染时被引用。 下面是一个例子： ```javascript import BootstrapTable from 'react-bootstrap-table-next'; import 'react-bootstrap-table-next/dist/react-bootstrap-table2.min.css'; const columns = [ { dataField: 'id', text: 'ID', }, { dataField: 'name', text: 'Name', }, { dataField: 'age', text: 'Age', }, { dataField: 'gender', text: 'Gender', rowSpan: 2, // 跨越两行 }, { dataField: 'location', text: 'Location', colSpan: 2, // 跨越两列 }, { dataField: 'address', text: 'Address', hidden: true, // 隐藏该列 }, { dataField: 'city', text: 'City', }, { dataField: 'state', text: 'State', }, ]; const data = [ { id: 1, name: 'John', age: 30, gender: 'Male', location: 'New York', address: '123 Main St', city: 'New York', state: 'NY', }, { id: 2, name: 'Jane', age: 25, gender: 'Female', location: 'San Francisco', address: '456 Elm St', city: 'San Francisco', state: 'CA', }, ]; <BootstrapTable keyField='id' data={ data } columns={ columns }/> ``` 在上面的例子中，表格中的 `Gender` 列跨越了两行，`Location` 列跨越了两列。注意，在定义了 `colSpan` 属性的列后面应该添加相应数量的列来占据跨度。 希望这可以帮助你实现合并单元格的功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值