Bootstrap-TreeGrid无法展示数据

Bootstrap-TreeGrid无法展示数据

最近,项目中需要使用到Bootstarp TreeGrid,也就是表格中展示层级关系,由于一开始没去找相应的博客,遇到了无法展示数据的问题。


首先

感谢懒得安分的开源,具体教程点击这里

TreeGrid的效果图
这里写图片描述



开始

Model类
首先创建一个,数据库对应的模型类
这里写图片描述

展示数据的页面
初始化 TreeGrid ,通过 Get 请求获取 JSON 数据,自定义 field、parentColumn、id
这里写图片描述



调试

开启调试后,居然没有展示出一条数据。
这里写图片描述
打开浏览器中 开发人员工具网络
响应的数据没有问题
这里写图片描述




解决方法

努力瞎改了好一阵子,在这一篇博客中 找到了问题所在。
这里写图片描述

复制一段原话:

当前记录的 parentColumnnull 或者空字符串的时候,这个节点就是根节点,然后根据根节点去递归找子节点。


如果是根节点,parentColumn 不能有值,在 开发者工具 可以看到 响应的 JSON 报文中,根节点的 parent_id0

在不修改数据库的情况下,通过 Linq 将所有的 根节点 的 parent_id 改为 “” (空字符串)

这里写图片描述


问题解决

Bootstrap Table Treegrid 是基于 Bootstrap Table 的扩展插件,用于在表格中显示树形结构数据。下面是使用 Bootstrap Table Treegrid 的步骤: 1. 引入必要的文件 ``` <link rel="stylesheet" href="https://cdn.staticfile.org/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdn.staticfile.org/bootstrap-table/1.15.4/bootstrap-table.min.css"> <link rel="stylesheet" href="https://cdn.staticfile.org/bootstrap-table-treegrid/1.11.0/bootstrap-table-treegrid.min.css"> <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdn.staticfile.org/bootstrap-table/1.15.4/bootstrap-table.min.js"></script> <script src="https://cdn.staticfile.org/bootstrap-table-treegrid/1.11.0/bootstrap-table-treegrid.min.js"></script> ``` 2. 在 HTML 页面中添加表格元素,并设置 data-url 属性为数据源的 URL。例如: ``` <table id="treegrid" data-url="data.json"></table> ``` 3. 在 JavaScript 中初始化表格,启用 Treegrid 插件。例如: ``` $('#treegrid').bootstrapTable({ columns: [{ field: 'id', title: 'ID' }, { field: 'name', title: '名称' }, { field: 'parentId', title: '父级ID' }], treeShowField: 'name', // 指定树形结构显示的字段 parentIdField: 'parentId', // 指定父级ID字段 idField: 'id', // 指定ID字段 treeCollapse: false, // 是否默认折叠树形结构 treeGrid: true, // 启用 Treegrid 插件 expandIcon: 'glyphicon glyphicon-plus', // 展开图标 collapseIcon: 'glyphicon glyphicon-minus' // 折叠图标 }); ``` 4. 数据源的格式需要满足以下要求: * 每个节点需要有一个 ID 字段和一个父级 ID 字段。 * 节点的父级 ID 字段可以为空。 * 节点之间的层级关系可以通过父级 ID 字段来确定。 以上就是使用 Bootstrap Table Treegrid 的基本步骤,您可以据实际情况调整参数和数据源格式。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值