版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_35393472/article/details/83302605
前言：因项目功能需要，在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 是重要代码，其他可忽略）
<div class="xm">
<div class="xm-d1">
<p class="xm-d1-p">权限管理</p>
</div>
<div class="xm-d2">
<div class="xm-d2-hang1">
<div class="pzright" style="width:101%;display: flex;justify-content: flex-start;float:right;">
<p class="xm-d1-p2">
<button id="add" onclick="addPermission()" class="layui-btn layui-btn-radius btnys"><i class="layui-icon"></i>添加</button>
<button class="layui-btn" id="btn-expand">全部展开</button>
<button class="layui-btn" id="btn-fold">全部折叠</button>
<button class="layui-btn" id="btn-refresh">刷新表格</button>
</p>
</div>
<div class="clear"></div>
</div>
<div class="xm-d2-hang2">
<table id="permissionTable" class="layui-table" lay-filter="permissionTable"></table>
</div>
</div>
</div>
主要代码：（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 [
'<a class="operation" lay-event="edit" href="javascript:void(0)" onclick="editDepartment(\''+ d.permissionId + '\')" title="编辑">',
'<i class="layui-icon layui-icon-edit"></i></a>',
'<a class="operation" lay-event="" href="javascript:void(0)" onclick="delDepartment(\''+ d.permissionId + '\')" title="删除">',
'<i class="layui-icon layui-icon-delete" ></i></a>',
].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}
如果上方对您有帮助 还请您可以随意施舍一点：
