官方文檔:https://fly.layui.com/extend/treeGrid/#doc
最新版本有些bug，我們使用上一個版本
百度雲:https://pan.baidu.com/s/1UCvCgId6HbT-D5Hy2dzIYA
提取碼: h6dt
1. 導入依賴
只需要導入一個js即可，效果圖和js文件
2. HTML 內容
<table id="permission" lay-filter="permissionTable"></table>
3. 導入js 並加載模塊
<script>
//加載treeGrid.js
layui.config({
base: 'layui/' //文件存放位置
}).extend({
treeGrid:'treeGrid' //文件名稱
})
//加載模塊
layui.use(['treeGrid','jquery'],function(){
var treeGrid = layui.treeGrid;
var $ = layui.jquery;
//獲取數據
$.get('sysPermission/list',function(d){
d=eval("("+d+")"); //數據轉換成json格式
$.each(d.data,function(i,e){
e.isOpen=false; //全部關閉 isOpen=false 關閉 true 展開
})
//渲染數據
treeGrid.render({
id:"perTable" // 標識
,elem: '#permission' // 對應的tableId
,data:d.data // 加載的數據
,idField:'id' // 唯一標識 數據庫中的主鍵 一般用id表示
,treeId:'id' // 樹形id字段名稱
,treeUpId:'parentid' // 樹形父id字段名稱
,treeShowName:'name' // 以樹形式顯示的字段
,cols: [[ // 加載數據
{field:'name', title: '權限名稱'}
,{field:'type', title: '類型'}
,{field:'url', title: '連接地址'}
]]
,page:false
})
})
})
</script>
4. 編寫接口 返回json格式對象
我用的是SpringMVC 初學者可以和我不一樣，只要能返回JSON格式的數據就可以，切記: 一定要讓和上面的$.get接口對應
@RequestMapping("/list")
@ResponseBody
public Map<String,Object> list(){
Map<String,Object> map = new HashMap<>();
map.put("code",0);
map.put("msg",null);
map.put("data",permissionService.getAll());
return map;
}
# 創建表
CREATE TABLE `sys_permission` (
`id` bigint(20) NOT NULL PRIMARY KEY, # '主鍵',
`name` varchar(128) NOT NULL, # '資源名稱',
`type` varchar(32) NOT NULL, # '資源類型：menu,button,',
`url` varchar(128) DEFAULT NULL, # '訪問url地址',
`percode` varchar(128) DEFAULT NULL, # '權限代碼字符串',
`parentid` bigint(20) DEFAULT NULL, # '父結點id',
`sortstring` varchar(128) DEFAULT NULL, # '排序號',
`available` char(1) DEFAULT NULL # '是否可用,1：可用，0不可用',
) charset=utf8;
# 添加數據
insert into sys_permission values
(1,'系統管理','menu',null,'system:*',null,null,'1'),
(2,'題庫管理','menu',null,'questLib:*',null,null,'1'),
(3,'用戶管理','menu','system/user/list','user:query',1,1,'1'),
(4,'添加用戶','function','system/user/add','user:add',3,1,'1'),
(5,'刪除用戶','function','user/delete','user:delete',3,2,'1'),
(6,'修改用戶','function','user/update','user:update',3,3,'1'),
(7,'角色管理','menu','system/role/list','role:query',1,2,'1'),
(8,'添加角色','function','role/add','role:add',7,1,'1'),
(9,'試題管理','menu','question/list','question:query',2,1,'1'),
(10,'添加試題','function','question/add','question:add',9,1,'1');