Layui的TreeTable使用

淩亂°似流年 2022-05-11 13:00 478阅读 0赞

Layui官方本身是没有TreeTable的,不过有个大佬自己写了一个,这是码云地址:[https://gitee.com/whvse/treetable-lay/tree/master/][https_gitee.com_whvse_treetable-lay_tree_master]

接下来我来说一下具体使用这个东西

首先下载这个文件夹中的东西![70][]

在你的web项目下将这个文件夹弄到里面去,在页面上导入这些文件

将下面这些代码放入你的body中

这是符合该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_whvse.gitee.io_treetable-lay_index.html]

这是简单的使用,详情大家可以去看文章开头的码云地址,有文档说明,有什么问题或者是交流可以在下方评论

[https_gitee.com_whvse_treetable-lay_tree_master]: https://gitee.com/whvse/treetable-lay/tree/master/
[70]: /images/20220505/35574c0119964a229188086529988a8b.png
[https_whvse.gitee.io_treetable-lay_index.html]: https://whvse.gitee.io/treetable-lay/index.html