fastadmin中请求数据是通过bootstrap-table来请求数据的,对于一些数据需要树状层级展示数据不能够很直观的显示,于是小编找到了一个解决方案就是利用bootstrap-treegrid,bootstrap-treegrid是依赖bootstrap-table实现的所以在使用中必须改动太多代码 。
先看下使用后的效果图:
文章插图
层叠显示树状展示效果一
文章插图
层叠显示树状展示效果二
接下来说说使用方法bootstrap-treegrid的gitee地址:
https://gitee.com/lds2013/bootstrap-treegrid
克隆下来后只需要将src目录下的bootstrap-treegrid.min.js复制到你fastadmin项目的publicassetsjs文件夹下
文章插图
然后在需要使用的对应的js文件中引入bootstrap-treegrid
文章插图
然后在已有的bootstrap-table代码请求中加以下代码
treeView: true,//是否显示树形视图treeId: "id",//定义关键字段来标识树节点treeField: "title",//定义树节点字段treeParentId: "pid", //定义父级ID字段parentIdInit: 0,treeRootLevel: 1,//树根的级别treeCollapseAll:true,//是否全部折叠,默认折叠
文章插图
后端返回的数据格式不用改变,然后刷新页面即可完成
【fastadmin框架结合bootstrap-treegrid数据渲染更直观】
推荐阅读
- 微软|微软终于承认.NET框架在Win11上存在问题:将努力修复
- 一个开箱即用的中后台前端框架,基于vue3+vite2开发
- Python的各种框架
- 周立波出了什么事件,周立波事件始末发生了什么事-
- 烤与炖的结合,特色烤鱼配方
- 中西减肥方法结合远离反弹与平台期
- 张碧晨冯提莫,冯提莫张碧晨喜提热搜-
- 怎么能瘦下来-,请问怎么瘦下来-
- 翡翠|翡翠玉石的厚度对价格是否有影响?需要全面结合和判断,仔细判断
- 程序员|推动职教与就业紧密结合 为航空职教发展营造良好环境