layui中的treeGrid 树形表格

文章目录

1. 导入依赖
2. HTML 内容
3. 导入js 并加载模块
4. 编写接口返回json格式对象

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

layui中的treeGrid 树形表格相关推荐

TreeGrid(树形表格)
树形表格用于显示分层数据表格.它是基于表格,组合树控件和可编辑表格.树形表格允许用户创建可定制的.异步展开行和显示在多列上的分层数据. 示例使用HTML标签创建树形表格,树形表格遵循数据表格的结构
esayui treegrid 树形表格去掉默认文件夹小图标
$(".tree-icon,.tree-file").removeClass("tree-file"); $(".tree-icon,.tree-fo ...
php 可以编辑treegrid,TreeGrid（树形表格）
TreeGrid(树形表格) 扩展自$.fn.datagrid.defaults.使用$.fn.treegrid.defaults重写默认值对象. 树形表格用于显示分层数据表格.它是基于数据表格.组合 ...
LayUI treetable树形表格的实现，数据格式正确，不显示的解决方案和在这个过程中遇到的坑~ 认真看你会得到一些想要的答案。
先给大家看下效果吧! 我这边只是针对数据显示的问题做了解释.并没有增删改查.找增删改查的同学可以不用看了. 做出这样的效果,首先我们要借用LayUI的内置插件,treetable.js 网上有很多,之 ...
Layui树形表格组件的实现
效果图: 一.Layui树形组件:treetable.js 可在layui下创建一个文件夹保存组件的js代码,以便引用. // 基于layui table的树形表格实现,只支持页面仅有一个表格的情况 ...
不容错过的精美的树形表格treegrid在项目里面使用总结
一问题描述: 树形表格TreeGrid在日常项目中还是运用的比较多的,哪究竟都在什么地方使用呢? 二使用场景 TreeGrid它具体使用在什么地方? 首页您要用TreeGrid,肯定是它的特点满足 ...
树形表格TreeGrid
树形表格TreeGrid 展开 1.效果截图 2.数据结构 [{"mcode":"UI","mname":"页面开发模板" ...
layui树形表格（treetable）列数据合计
项目中遇到的问题,按要求对后台数据以树形列表(使用layui的第三方扩展组件,使用方法自行百度)展示之后.又来了新的需求,需要对展开后的子列表进行统计并将结果显示到父级列表.百度了半天没找到相关的示例 ...
layui树形懒加载_layui树形表格支持非异步和异步加载
layui树形表格支持非异步和异步加载. 使用示例如下: 展开全部展开一层折叠全部折叠一层 layui.config({ base: '/uui/treetable-lay/module/' } ...

layui中的treeGrid 树形表格

文章目录

1. 导入依赖

2. HTML 内容

3. 导入js 并加载模块

4. 编写接口返回json格式对象

layui中的treeGrid 树形表格相关推荐

最新文章

热门文章

layui中的treeGrid 树形表格

文章目录

1. 导入依赖

2. HTML 内容

3. 导入js 并加载模块

4. 编写接口 返回json格式对象

layui中的treeGrid 树形表格相关推荐

最新文章

热门文章

4. 编写接口返回json格式对象