<返回更多

fastadmin框架结合bootstrap-treegrid数据渲染更直观

2022-06-23    黎明科技园
加入收藏

fastadmin中请求数据是通过bootstrap-table来请求数据的,对于一些数据需要树状层级展示数据不能够很直观的显示,于是小编找到了一个解决方案就是利用bootstrap-treegridbootstrap-treegrid是依赖bootstrap-table实现的所以在使用中必须改动太多代码

先看下使用后的效果图:

 

fastadmin框架结合bootstrap-treegrid数据渲染更直观

层叠显示树状展示效果一


fastadmin框架结合bootstrap-treegrid数据渲染更直观

层叠显示树状展示效果二

接下来说说使用方法

bootstrap-treegrid的gitee地址:
https://gitee.com/lds2013/bootstrap-treegrid

克隆下来后只需要将src目录下的bootstrap-treegrid.min.js复制到你fastadmin项目的publicassetsjs文件夹下

fastadmin框架结合bootstrap-treegrid数据渲染更直观

 

然后在需要使用的对应的js文件中引入bootstrap-treegrid

fastadmin框架结合bootstrap-treegrid数据渲染更直观

 

然后在已有的bootstrap-table代码请求中加以下代码

treeView: true,//是否显示树形视图
treeId: "id",//定义关键字段来标识树节点
treeField: "title",//定义树节点字段
treeParentId: "pid", //定义父级ID字段
parentIdInit: 0,
treeRootLevel: 1,//树根的级别
treeCollapseAll:true,//是否全部折叠,默认折叠
fastadmin框架结合bootstrap-treegrid数据渲染更直观

 

后端返回的数据格式不用改变,然后刷新页面即可完成

声明:本站部分内容来自互联网,如有版权侵犯或其他问题请与我们联系,我们将立即删除或处理。
▍相关推荐
更多资讯 >>>