大家好,又见面了,我是你们的朋友全栈君。
前言:因项目功能需要,在shiro权限管理模块中需要使用树状展示,前端使用的layUI框架,在官网的开发文档上没有找到树状表格的内容。只有树状菜单的文档:https://www.layuion.com/doc/modules/tree.html
layui官网已关闭,相关内容可到这里查看:https://www.layuion.com/
先看效果图:
文章结尾给大家提供示例代码下载。
树状表格步骤如下:
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}
–modify from 2020-11-06 09:01
示例下载:下载
–modify from end
如果有问题也可加V(1173681997)
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/130691.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...