Layui的TreeTable使用
大家好，又见面了，我是你们的朋友全栈君。
Layui官方本身是没有TreeTable的,不过有个大佬自己写了一个,这是码云地址:https://gitee.com/whvse/treetable-lay/tree/master/
接下来我来说一下具体使用这个东西
首先下载这个文件夹中的东西
在你的web项目下将这个文件夹弄到里面去,在页面上导入这些文件
<link rel="stylesheet" href="assets/layui/css/layui.css">
<link rel="stylesheet" href="assets/common.css"/>
<script src="layui/layui.js"></script>将下面这些代码放入你的body中
<div class="layui-container">
<br> <br>
<!-- <a class="layui-btn layui-btn-normal" href="index.html"><<返回</a> -->
<div class="layui-btn-group">
<button class="layui-btn" id="btn-expand">全部展开</button>
<button class="layui-btn" id="btn-fold">全部折叠</button>
</div>
<table id="auth-table" class="layui-table" lay-filter="auth-table"></table>
</div>这是符合该treetable的json格式
{
"code": 0,
"msg": "",
"count": 19,
"data": [
{
"authorityId": 1,
"authorityName": "系统管理",
"orderNumber": 1,
"menuUrl": null,
"menuIcon": "layui-icon-set",
"createTime": "2018/06/29 11:05:41",
"authority": null,
"checked": 0,
"updateTime": "2018/07/13 09:13:42",
"isMenu": 0,
"parentId": -1
},
{
"authorityId": 2,
"authorityName": "用户管理",
"orderNumber": 2,
"menuUrl": "system/user",
"menuIcon": null,
"createTime": "2018/06/29 11:05:41",
"authority": null,
"checked": 0,
"updateTime": "2018/07/13 09:13:42",
"isMenu": 0,
"parentId": 1
},
{
"authorityId": 3,
"authorityName": "查询用户",
"orderNumber": 3,
"menuUrl": "",
"menuIcon": "",
"createTime": "2018/07/21 13:54:16",
"authority": "user:view",
"checked": 0,
"updateTime": "2018/07/21 13:54:16",
"isMenu": 1,
"parentId": 2
},
{
"authorityId": 4,
"authorityName": "添加用户",
"orderNumber": 4,
"menuUrl": null,
"menuIcon": null,
"createTime": "2018/06/29 11:05:41",
"authority": "user:add",
"checked": 0,
"updateTime": "2018/07/13 09:13:42",
"isMenu": 1,
"parentId": 2
},
{
"authorityId": 5,
"authorityName": "修改用户",
"orderNumber": 5,
"menuUrl": null,
"menuIcon": null,
"createTime": "2018/06/29 11:05:41",
"authority": "user:edit",
"checked": 0,
"updateTime": "2018/07/13 09:13:42",
"isMenu": 1,
"parentId": 2
},
{
"authorityId": 6,
"authorityName": "删除用户",
"orderNumber": 6,
"menuUrl": null,
"menuIcon": null,
"createTime": "2018/06/29 11:05:41",
"authority": "user:delete",
"checked": 0,
"updateTime": "2018/07/13 09:13:42",
"isMenu": 1,
"parentId": 2
},
{
"authorityId": 7,
"authorityName": "角色管理",
"orderNumber": 7,
"menuUrl": "system/role",
"menuIcon": null,
"createTime": "2018/06/29 11:05:41",
"authority": null,
"checked": 0,
"updateTime": "2018/07/13 09:13:42",
"isMenu": 0,
"parentId": 1
},
{
"authorityId": 8,
"authorityName": "查询角色",
"orderNumber": 8,
"menuUrl": "",
"menuIcon": "",
"createTime": "2018/07/21 13:54:59",
"authority": "role:view",
"checked": 0,
"updateTime": "2018/07/21 13:54:58",
"isMenu": 1,
"parentId": 7
},
{
"authorityId": 9,
"authorityName": "添加角色",
"orderNumber": 9,
"menuUrl": "",
"menuIcon": "",
"createTime": "2018/06/29 11:05:41",
"authority": "role:add",
"checked": 0,
"updateTime": "2018/07/13 09:13:42",
"isMenu": 1,
"parentId": 7
},
{
"authorityId": 10,
"authorityName": "修改角色",
"orderNumber": 10,
"menuUrl": "",
"menuIcon": "",
"createTime": "2018/06/29 11:05:41",
"authority": "role:edit",
"checked": 0,
"updateTime": "2018/07/13 09:13:42",
"isMenu": 1,
"parentId": 7
},
{
"authorityId": 11,
"authorityName": "删除角色",
"orderNumber": 11,
"menuUrl": "",
"menuIcon": "",
"createTime": "2018/06/29 11:05:41",
"authority": "role:delete",
"checked": 0,
"updateTime": "2018/07/13 09:13:42",
"isMenu": 1,
"parentId": 7
},
{
"authorityId": 12,
"authorityName": "角色权限管理",
"orderNumber": 12,
"menuUrl": "",
"menuIcon": "",
"createTime": "2018/06/29 11:05:41",
"authority": "role:auth",
"checked": 0,
"updateTime": "2018/07/13 15:27:18",
"isMenu": 1,
"parentId": 7
},
{
"authorityId": 13,
"authorityName": "权限管理",
"orderNumber": 13,
"menuUrl": "system/authorities",
"menuIcon": null,
"createTime": "2018/06/29 11:05:41",
"authority": null,
"checked": 0,
"updateTime": "2018/07/13 15:45:13",
"isMenu": 0,
"parentId": 1
},
{
"authorityId": 14,
"authorityName": "查询权限",
"orderNumber": 14,
"menuUrl": "",
"menuIcon": "",
"createTime": "2018/07/21 13:55:57",
"authority": "authorities:view",
"checked": 0,
"updateTime": "2018/07/21 13:55:56",
"isMenu": 1,
"parentId": 13
},
{
"authorityId": 15,
"authorityName": "添加权限",
"orderNumber": 15,
"menuUrl": "",
"menuIcon": "",
"createTime": "2018/06/29 11:05:41",
"authority": "authorities:add",
"checked": 0,
"updateTime": "2018/06/29 11:05:41",
"isMenu": 1,
"parentId": 13
},
{
"authorityId": 16,
"authorityName": "修改权限",
"orderNumber": 16,
"menuUrl": "",
"menuIcon": "",
"createTime": "2018/07/13 09:13:42",
"authority": "authorities:edit",
"checked": 0,
"updateTime": "2018/07/13 09:13:42",
"isMenu": 1,
"parentId": 13
},
{
"authorityId": 17,
"authorityName": "删除权限",
"orderNumber": 17,
"menuUrl": "",
"menuIcon": "",
"createTime": "2018/06/29 11:05:41",
"authority": "authorities:delete",
"checked": 0,
"updateTime": "2018/06/29 11:05:41",
"isMenu": 1,
"parentId": 13
},
{
"authorityId": 18,
"authorityName": "登录日志",
"orderNumber": 18,
"menuUrl": "system/loginRecord",
"menuIcon": null,
"createTime": "2018/06/29 11:05:41",
"authority": null,
"checked": 0,
"updateTime": "2018/06/29 11:05:41",
"isMenu": 0,
"parentId": 1
},
{
"authorityId": 19,
"authorityName": "查询登录日志",
"orderNumber": 19,
"menuUrl": "",
"menuIcon": "",
"createTime": "2018/07/21 13:56:43",
"authority": "loginRecord:view",
"checked": 0,
"updateTime": "2018/07/21 13:56:43",
"isMenu": 1,
"parentId": 18
}
]
}下面是使用这个组件的js
layui.config({
base : 'module/'
}).extend({
treetable : 'treetable-lay/treetable'
}).use([ 'table', 'treetable' ], function() {
var $ = layui.jquery;
var table = layui.table;
var treetable = layui.treetable;
// 渲染表格
var renderTable= function(){
layer.load(2);
treetable.render({
treeColIndex : 1,
treeSpid : -1,
treeIdName : 'Menuid',//自身的id
treePidName : 'parentid',//父节点的id
elem : '#auth-table',
data : databind(),//这里可以去看文档,可以用url,也可以直接使用json字符串
page : false,//不可分页
cols : [ [ {//表头格式
type : 'numbers'
}, {
field : 'name',//对于的json字符的键
minWidth : 200,//宽度
title : '权限名称'
}, {
field : 'Authid',
title : '权限标识'
}, {
field : 'href',
title : '菜单url'
},
// {field: 'orderNumber', width: 80, align: 'center', title: '排序号'},
// {
// field: 'isMenu', width: 80, align: 'center', templet: function (d) {
// if (d.isMenu == 1) {
// return '<span class="layui-badge layui-bg-gray">按钮</span>';
// }
// if (d.parentId == -1) {
// return '<span class="layui-badge layui-bg-blue">目录</span>';
// } else {
// return '<span class="layui-badge-rim">菜单</span>';
// }
// }, title: '类型'
// },
{
field : 'mark',
title : '备注'
}, {
templet : '#auth-state',
width : 220,
align : 'center',
title : '操作'
} ] ],
done : function() {
layer.closeAll('loading');
},
// di:testReload,
});}
renderTable();
$('#btn-expand').click(function() {
treetable.expandAll('#auth-table');
});
$('#btn-fold').click(function() {
treetable.foldAll('#auth-table');
});其中提供了两个方法,一个是全部展开,和全部关闭,方法在文档中有,这是这个组件的demo示例:https://whvse.gitee.io/treetable-lay/index.html
这是简单的使用,详情大家可以去看文章开头的码云地址,有文档说明,有什么问题或者是交流可以在下方评论
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/131975.html原文链接：https://javaforall.cn
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022年4月3，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
