layui中的treeGrid 树形表格

最新推荐文章于 2025-04-15 09:15:49 发布

自学之路←_←

最新推荐文章于 2025-04-15 09:15:49 发布

阅读量2.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：工具插件文章标签： layui 前端

本文链接：https://blog.csdn.net/qq_43636251/article/details/116892904

工具插件专栏收录该内容

12 篇文章

订阅专栏

该博客介绍了如何使用Layui的TreeGrid组件来展示树形表格数据，并结合SpringMVC后端返回JSON格式数据。首先，导入Layui的treeGrid.js模块，然后配置HTML表格元素，接着加载并渲染数据，通过$.get接口从后台获取JSON数据。最后，展示了创建数据库表和填充初始数据的SQL语句。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

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