layUI展示树状treetable树形表格完整代码

前言：因项目功能需要，在shiro权限管理模块中需要使用树状展示，前端使用的layUI框架，在官网的开发文档上没有找到树状表格的内容。只有树状菜单的文档：https://www.layui.com/doc/modules/tree.html

树状表格步骤如下：

1、首先下载所需调用的文件。
下载链接：https://pan.baidu.com/s/1MRZT4VI4rUTzKL_ap5yipw

2、引入刚刚下载的文件 （压缩包中有：module文件夹 和json文件夹）
module文件中是需要调用的js和css
json是后端所需要给前端传的数据格式（例子，不是下方代码的数据）。

3、还需要正常的引用layUI的必要文件（例如：layui.js、layui.css等，根据项目所需！）

HTML:（下方的table标签 和 最后三个button 是重要代码，其他可忽略）

  

            

                
权限管理
             
             
              

                

                  

                    

                	 	添加
				        全部展开
				        全部折叠
				        刷新表格
                   
                  
  
                 
  
                
                

				   
                
            
            
        

主要代码：（JavaScript）

    /*使用模块加载的方式 加载文件*/
    layui.config({
        base: '${ctx}/resoueces/css/layui/module/'
    }).extend({
        treetable: 'treetable-lay/treetable'
    }).use(['layer', 'table', 'treetable'], function () {
        var $ = layui.jquery;
        var table = layui.table;
        var layer = layui.layer;
        var treetable = layui.treetable;

        // 渲染表格
        var renderTable = function () {//树桩表格参考文档：https://gitee.com/whvse/treetable-lay
            layer.load(2);
            treetable.render({
                treeColIndex: 1,//树形图标显示在第几列
                treeSpid: 0,//最上级的父级id
                treeIdName: 'permissionId',//id字段的名称
                treePidName: 'pid',//pid字段的名称
                treeDefaultClose: false,//是否默认折叠
                treeLinkage: true,//父级展开时是否自动展开所有子级
                elem: '#permissionTable',
                url: '${ctx}/permission/permissionTree',
                page: false,
                cols: [[
                    {type: 'numbers', title: '编号'},
                    {field: 'permissionName', title: '资源名称'},
                    {field: 'permissionUrl', title: '资源路径'},
                    {field: 'permissionType', title: '资源简介'},
                    {field: 'pid', title: '排序'},
                    {field: 'resType', title: '类型',
                    	templet: function(d){
                    		if(d.resType==0){
                    			return '菜单';
                    		}else{
                    			return '按钮';
                    		}
                        }	
                    },
                    {templet: complain, title: '操作'}
                ]],
                done: function () {
                    layer.closeAll('loading');
                }
            });
        };

        renderTable();
        
		//触发三个button按钮
        $('#btn-expand').click(function () {
            treetable.expandAll('#permissionTable');
        });

        $('#btn-fold').click(function () {
            treetable.foldAll('#permissionTable');
        });

        $('#btn-refresh').click(function () {
            renderTable();
        });
		
        
        function complain(d){//操作中显示的内容
        	if(d.permissionUrl!=null){
        		return [
                        '',
            	     	'',
            	     	'',
            	     	'',
            	     	].join('');
        	}else{
        		return '';
        	}
        	
        }
        //监听工具条
        table.on('tool(permissionTable)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;
			if(data.permissionName!=null){
				if (layEvent === 'del') {
	                layer.msg('删除' + data.id);
	            } else if (layEvent === 'edit') {
	                layer.msg('修改' + data.id);
	            }
			}
        });
    });

备注：另外对数据库的表要有一定的等级关系。要有pid列

效果图：

我的后端传给前端的json：（请做参考，数据库表列同内容）

{"msg":"true","code":0,"data":[{"permissionId":1,"permissionName":"系统管理","permissionUrl":null,"permissionType":null,"icon":null,"pid":0,"seq":0,"resType":"0"},{"permissionId":2,"permissionName":"账户管理","permissionUrl":"/link/sysUsers","permissionType":"管理登录的账户","icon":null,"pid":1,"seq":1,"resType":"1"},{"permissionId":3,"permissionName":"部门管理","permissionUrl":"/link/deparAdministrate","permissionType":"部门的管理","icon":null,"pid":1,"seq":2,"resType":"1"},{"permissionId":4,"permissionName":"角色管理","permissionUrl":"/link/sysRoleManage","permissionType":"设定角色的权限","icon":null,"pid":1,"seq":3,"resType":"1"},{"permissionId":5,"permissionName":"权限管理","permissionUrl":"/link/sysPermission","permissionType":"对权限进行编辑","icon":null,"pid":1,"seq":4,"resType":"1"},{"permissionId":6,"permissionName":"系统日志","permissionUrl":"/link/sysLog","permissionType":"系统日志","icon":null,"pid":1,"seq":5,"resType":"1"}],"count":6}

如果上方对您有帮助 还请您可以随意施舍一点，有问题也可加V(1173681997)：