fastadmin框架结合bootstrap-treegrid数据渲染更直观
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">fastadmin中请求数据是<span style="color: black;">经过</span><strong style="color: blue;">bootstrap-table</strong>来请求数据的，<span style="color: black;">针对</span><span style="color: black;">有些</span>数据需要树状层级展示数据<span style="color: black;">不可</span>够很直观的<span style="color: black;">表示</span>，于是<span style="color: black;">博主</span>找到了一个<span style="color: black;">处理</span><span style="color: black;">方法</span><span style="color: black;">便是</span>利用<strong style="color: blue;">bootstrap-treegrid</strong>，<strong style="color: blue;">bootstrap-treegrid是依赖bootstrap-table实现的<span style="color: black;">因此</span>在<span style="color: black;">运用</span>中必须改动太多代码</strong>。</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">先看下<span style="color: black;">运用</span>后的效果图:</strong></p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/14402dd563fc45e69cd1949b796f9e5f~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1728742686&x-signature=m%2FnXhp0j21hVpes8qMogjoQw07I%3D" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">层叠<span style="color: black;">表示</span>树状展示效果一</p>
</div>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p26-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/549710aab4a141bf989a43ffe1600036~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1728742686&x-signature=05bSlpwOuzFbSNL7qhDyy36QDh8%3D" style="width: 50%; margin-bottom: 20px;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">层叠<span style="color: black;">表示</span>树状展示效果二</p>
</div>
<h1 style="color: black; text-align: left; margin-bottom: 10px;">接下<span style="color: black;">来讲</span>说<span style="color: black;">运用</span><span style="color: black;">办法</span></h1>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><strong style="color: blue;">bootstrap-treegrid的gitee<span style="color: black;">位置</span>：</strong><span style="color: black;">https://gitee.com/lds2013/bootstrap-treegrid</span></p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">克隆下来后只需要将src目录下的bootstrap-treegrid.min.js复制到你fastadmin项目的public\assets\js文件夹下</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/2e5a029d6ea74659ab8e33046cef3726~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1728742686&x-signature=3qyLF0lPkvqNr0aI6yh4EAen94Q%3D" style="width: 50%; margin-bottom: 20px;"></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">而后</span>在需要<span style="color: black;">运用</span>的对应的js文件中引入bootstrap-treegrid</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/f2df9ab4b6f943c2b305b987e65648cc~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1728742686&x-signature=5DzsLohxhGQkCdEYmCCX27NuFDM%3D" style="width: 50%; margin-bottom: 20px;"></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;"><span style="color: black;">而后</span>在已有的<strong style="color: blue;">bootstrap-table</strong>代码请求中加以下代码</p><span style="color: black;">treeView</span>: true,<span style="color: black;">//<span style="color: black;">是不是</span><span style="color: black;">表示</span>树形视图</span>
<span style="color: black;">treeId</span>: <span style="color: black;">"id"</span>,<span style="color: black;">//定义关键字段来标识树节点</span>
<span style="color: black;">treeField</span>: <span style="color: black;">"title"</span>,<span style="color: black;">//定义树节点字段</span>
<span style="color: black;">treeParentId</span>: <span style="color: black;">"pid"</span>, <span style="color: black;">//定义父级ID字段</span>
<span style="color: black;">parentIdInit</span>: <span style="color: black;">0</span>,
<span style="color: black;">treeRootLevel</span>: <span style="color: black;">1</span>,<span style="color: black;">//树根的级别</span>
<span style="color: black;">treeCollapseAll</span>:true,<span style="color: black;">//<span style="color: black;">是不是</span><span style="color: black;">所有</span>折叠，默认折叠</span>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/4ef56ab82307490993a417667f12eed9~noop.image?_iz=58558&from=article.pc_detail&lk3s=953192f4&x-expires=1728742686&x-signature=gQttC%2F34CfaKm2Z%2FQRmqFlE2mm8%3D" style="width: 50%; margin-bottom: 20px;"></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">后端返回的数据格式<span style="color: black;">不消</span>改变，<span style="color: black;">而后</span>刷新页面<span style="color: black;">就可</span>完成</p>
页:
[1]