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

fastadmin中请求数据是通过bootstrap-table来请求数据的,对于一些数据需要树状层级展示数据不能够很直观的显示,于是小编找到了一个解决方案就是利用bootstrap-treegridbootstrap-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,//是否全部折叠,默认折叠

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

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
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 的基本步骤,您可以根据实际情况调整参数和数据源格式。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值