layui 的权限树 authtree 用于类 RBAC 权限控制
Posted 友善面具
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了layui 的权限树 authtree 用于类 RBAC 权限控制相关的知识，希望对你有一定的参考价值。
权限树是权限操作的常用宣染方式，或者使用表格树渲染方式。由于我使用的是Layui前端，所以使用的是Layui自身的控件。
前端html代码
<div id="LAY-auth-tree-index"></div>
前端javascript
function getPermissionTree(roleId){
// 初始化
$.ajax({
url: '#(baseUrl)admin/role/getPermission',
data:{"roleId":roleId},
dataType: 'json',
success: function(data){
debugger;
// 渲染时传入渲染目标ID，树形结构数据（具体结构看样例，checked表示默认选中），以及input表单的名字
authtree.render('#LAY-auth-tree-index', data.data, {inputname: 'authids[]', layfilter: 'lay-check-auth', openall: false});
// 监听自定义lay-filter选中状态，PS:layui现在不支持多次监听，所以扩展里边只能改变触发逻辑，然后引起了事件冒泡延迟的BUG，要是谁有好的建议可以反馈我
form.on('checkbox(lay-check-auth)', function(data){
// 获取所有节点
var all = authtree.getAll('#LAY-auth-tree-index');
console.log('all', all);
// 获取所有已选中节点
var checked = authtree.getChecked('#LAY-auth-tree-index');
console.log('checked', checked);
// 获取所有未选中节点
var notchecked = authtree.getNotChecked('#LAY-auth-tree-index');
console.log('notchecked', notchecked);
// 注意这里：需要等待事件冒泡完成，不然获取叶子节点不准确。
setTimeout(function(){
// 获取选中的叶子节点
var leaf = authtree.getLeaf('#LAY-auth-tree-index');
console.log('leaf', leaf);
}, 100);
});
}
});
}
form.on('submit(LAY-auth-tree-submit)', function(obj){
var authids = authtree.getAll('#LAY-auth-tree-index');
console.log('Choosed authids is', authids);
obj.field.authids = authids;
var ids = authids.join(",");
debugger;
$.ajax({
url: '#(baseUrl)admin/role/setPermission',
dataType: 'json',
data: {"roleId":roleId,"authids":ids},
success: function(res){
layer.alert('提交成功！');
}
});
return false;
});
后端与返回的JSON
//菜单数据
public JSONArray genTreeList(String roleId, String systemCode) {
List<ModuleEntity> moduleList = BaseModuleService.me.getList(systemCode);
List<PermissionEntity> permissionEntityList = BasePermissionService.me.findByResourceIdAndPermissionId("base",
"BaseRole", roleId);
JSONArray jsonArray = new JSONArray();
for (ModuleEntity entity : moduleList) {
TreeMenu authorTreeEntity = new TreeMenu();
authorTreeEntity.setId(entity.getId());
authorTreeEntity.setParentId(entity.getParentId());
authorTreeEntity.setName(entity.getFullName());
authorTreeEntity.setValue(entity.getId());
for (PermissionEntity permissionEntity : permissionEntityList) {
if (authorTreeEntity.getId().equals(permissionEntity.getId())) {
authorTreeEntity.setChecked(true);
break;
}
}
jsonArray.add(authorTreeEntity);
}
return jsonArray;
}
//递归JSONArray成树Json
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
public class TreeKit {
public static JSONArray treeMenuList(JSONArray menuList, String parentId) {
JSONArray childMenu = new JSONArray();
for (Object object : menuList) {
JSONObject jsonMenu = JSONObject.fromObject(object);
String menuId = jsonMenu.getString("id");
String pid = jsonMenu.getString("parentId");
if (parentId.equalsIgnoreCase(pid)) {
JSONArray c_node = treeMenuList(menuList, menuId);
jsonMenu.put("list", c_node);
childMenu.add(jsonMenu);
}
}
return childMenu;
}
}
//后端render成树JSON
public void getPermission() {
String roleId = getPara("roleId");
String systemCode = getPara("systemCode", "base");
JSONArray menuList = srv.genTreeList(roleId, systemCode);
TreeMenuPager listPager = new TreeMenuPager(200, "获取数据成功！",0,
TreeKit.treeMenuList(menuList, "0"));
renderJson(listPager);
}
{
"msg": "获取数据成功！",
"code": 200,
"data": [{
"level": "",
"name": "快速开发平台",
"checked": false,
"id": "10005235",
"value": "10005235",
"parentId": "0",
"list": [{
"level": "",
"name": "敏捷开发",
"checked": false,
"id": "8b34e791-a32e-48e6-9d1d-cf242a1a76c6",
"value": "8b34e791-a32e-48e6-9d1d-cf242a1a76c6",
"parentId": "10005235",
"list": [{
"level": "",
"name": "代码生成器",
"checked": false,
"id": "04660361-7fff-4802-81e0-603830fa9505",
"value": "04660361-7fff-4802-81e0-603830fa9505",
"parentId": "8b34e791-a32e-48e6-9d1d-cf242a1a76c6",
"list": []
}]
}, {
"level": "",
"name": "公共信息",
"checked": false,
"id": "ae3151cf-2377-48cc-8cb2-d50d4def65c9",
"value": "ae3151cf-2377-48cc-8cb2-d50d4def65c9",
"parentId": "10005235",
"list": [{
"level": "",
"name": "日程管理",
"checked": false,
"id": "13011aee-a450-4700-bb65-9f9bd2f9d333",
"value": "13011aee-a450-4700-bb65-9f9bd2f9d333",
"parentId": "ae3151cf-2377-48cc-8cb2-d50d4def65c9",
"list": []
}, {
"level": "",
"name": "新闻中心",
"checked": false,
"id": "32f22dd2-d790-4cbf-9190-8263471e1afb",
"value": "32f22dd2-d790-4cbf-9190-8263471e1afb",
"parentId": "ae3151cf-2377-48cc-8cb2-d50d4def65c9",
"list": []
}, {
"level": "",
"name": "资讯类别",
"checked": false,
"id": "97cc728b-aa67-447e-8d46-09104e688028",
"value": "97cc728b-aa67-447e-8d46-09104e688028",
"parentId": "ae3151cf-2377-48cc-8cb2-d50d4def65c9",
"list": []
}]
}, {
"level": "",
"name": "系统管理",
"checked": false,
"id": "ce8b7c10f2c24001a57e5b9905784731",
"value": "ce8b7c10f2c24001a57e5b9905784731",
"parentId": "10005235",
"list": [{
"level": "",
"name": "供应商管理",
"checked": false,
"id": "776ebe2d1aa6437c8571a22e877ffac6",
"value": "776ebe2d1aa6437c8571a22e877ffac6",
"parentId": "ce8b7c10f2c24001a57e5b9905784731",
"list": []
}, {
"level": "",
"name": "接口密钥管理",
"checked": false,
"id": "ee05b8f049c744eaa8cb45a03984759e",
"value": "ee05b8f049c744eaa8cb45a03984759e",
"parentId": "ce8b7c10f2c24001a57e5b9905784731",
"list": []
}, {
"level": "",
"name": "客户管理",
"checked": false,
"id": "31746e98-6544-43d8-b9c2-4a49ef898850",
"value": "31746e98-6544-43d8-b9c2-4a49ef898850",
"parentId": "ce8b7c10f2c24001a57e5b9905784731",
"list": []
}, {
"level": "",
"name": "参数设置",
"checked": false,
"id": "c55360c0-7579-4cc2-9f47-15756ae28d0c",
"value": "c55360c0-7579-4cc2-9f47-15756ae28d0c",
"parentId": "ce8b7c10f2c24001a57e5b9905784731",
"list": []
}, {
"level": "",
"name": "菜单管理",
"checked": false,
"id": "06ce9f218aaf4b8399f0c920e424ee52",
"value": "06ce9f218aaf4b8399f0c920e424ee52",
"parentId": "ce8b7c10f2c24001a57e5b9905784731",
"list": []
}, {
"level": "",
"name": "角色管理",
"checked": false,
"id": "199e4911862a4625987d34c517a965cd",
"value": "199e4911862a4625987d34c517a965cd",
"parentId": "ce8b7c10f2c24001a57e5b9905784731",
"list": []
}, {
"level": "",
"name": "数据字典",
"checked": false,
"id": "21099e76fdc247269bf9d1f3d611bf47",
"value": "21099e76fdc247269bf9d1f3d611bf47",
"parentId": "ce8b7c10f2c24001a57e5b9905784731",
"list": []
}, {
"level": "",
"name": "员工管理",
"checked": false,
"id": "43165ec8d609456c927e7cbb7e441554",
"value": "43165ec8d609456c927e7cbb7e441554",
"parentId": "ce8b7c10f2c24001a57e5b9905784731",
"list": []
}, {
"level": "",
"name": "用户管理",
"checked": false,
"id": "5a83865690764191a0dd8506a935ecd9",
"value": "5a83865690764191a0dd8506a935ecd9",
"parentId": "ce8b7c10f2c24001a57e5b9905784731",
"list": []
}, {
"level": "",
"name": "用户权限",
"checked": false,
"id": "84bdaacbdf3c49778f9c63e65f34cabe",
"value": "84bdaacbdf3c49778f9c63e65f34cabe",
"parentId": "ce8b7c10f2c24001a57e5b9905784731",
"list": []
}, {
"level": "",
"name": "子系统管理",
"checked": false,
"id": "a86148cdd4d147cbb5b253e6be316915",
"value": "a86148cdd4d147cbb5b253e6be316915",
"parentId": "ce8b7c10f2c24001a57e5b9905784731",
"list": []
}, {
"level": "",
"name": "系统日记管理",
"checked": false,
"id": "af6349217df94681a82f01ede04f8bb4",
"value": "af6349217df94681a82f01ede04f8bb4",
"parentId": "ce8b7c10f2c24001a57e5b9905784731",
"list": []
}, {
"level": "",
"name": "序列管理",
"checked": false,
"id": "b1e2943cccf14298abe85e01e961ef7a",
"value": "b1e2943cccf14298abe85e01e961ef7a",
"parentId": "ce8b7c10f2c24001a57e5b9905784731",
"list": []
}, {
"level": "",
"name": "行政区域管理",
"checked": false,
"id": "b20903ab6b434b17b0c1f46e8b482c10",
"value": "b20903ab6b434b17b0c1f46e8b482c10",
"parentId": "ce8b7c10f2c24001a57e5b9905784731",
"list": []
}, {
"level": "",
"name": "组织机构管理",
"checked": false,
"id": "f037490ec2684d928e3de19edb4c883f",
"value": "f037490ec2684d928e3de19edb4c883f",
"parentId": "ce8b7c10f2c24001a57e5b9905784731",
"list": []
}]
}, {
"level": "",
"name": "内部通信录管理",
"checked": false,
"id": "eebc605c059a46799c73c351bf47b6c0",
"value": "eebc605c059a46799c73c351bf47b6c0",
"parentId": "10005235",
"list": [{
"level": "",
"name": "内部通信录",
"checked": false,
"id": "51ea349d1b6842b2a74dd60567bc4db5",
"value": "51ea349d1b6842b2a74dd60567bc4db5",
"parentId": "eebc605c059a46799c73c351bf47b6c0",
"list": []
}]
}]
}],
"count": 0
}
以上是关于layui 的权限树 authtree 用于类 RBAC 权限控制的主要内容，如果未能解决你的问题，请参考以下文章