官方文档: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');