Easy-UI 的树形插件实现权限选中效果
最近需要一个实现一个权限设置，如果通过手工的设置一个一个输入的话，弄不好要疯掉，所以就来一个程序图形化的展示数据然后选中。
至于树形结构的话选择有很多，本着以前使用过Easy-UI的情况下，就决定用Easy-UI 的树形结构实现了
话不多说，先看效果：
这是选中部分子节点的：
这是选中全部子节点的：
可以看到我们的权限直接变为父节点的，这样符合父权限包含所有子权限的规则，个人使用的Shiro，设计初衷也是如此。更多的效果图就不放出来了，有兴趣的可以自己试一下。
接下来就是实现的过程了。
① 数据准备：作为一个简单的demo，肯定不用数据库了，这样方便练习。就用json即可，记得把下面的数据存储为一个json文件，然后url请求它
Permissions：所有的权限数据
[
{
"children": [],//字权限集合
"id": "1",//权限id
"permission": "common:*",//权限描述符
"pid": "0",//父分类id 0为定级id
"text": "控制台"//权限名字
},
{
"children": [
{
"children": [
{
"children": [
{
"children": [],
"id": "5",
"permission": "bussiness:roadsort:add",
"pid": "4",
"text": "添加线路类别"
},
{
"children": [],
"id": "6",
"permission": "bussiness:roadsort:update",
"pid": "4",
"text": "修改线路类别"
},
{
"children": [],
"id": "7",
"permission": "bussiness:roadsort:delete",
"pid": "4",
"text": "删除线路类别"
},
{
"children": [],
"id": "8",
"permission": "bussiness:roadsort:log",
"pid": "4",
"text": "线路类别操作日志"
},
{
"children": [],
"id": "9",
"permission": "bussiness:roadsort:collection",
"pid": "4",
"text": "批量操作线路类别"
}
],
"id": "4",
"permission": "bussiness:roadsort:*",
"pid": "3",
"text": "线路类别"
},
{
"children": [
{
"children": [],
"id": "11",
"permission": "bussiness:stroke:add",
"pid": "10",
"text": "添加行程模板"
},
{
"children": [],
"id": "12",
"permission": "bussiness:stroke:update",
"pid": "10",
"text": "修改行程模板"
},
{
"children": [],
"id": "13",
"permission": "bussiness:stroke:collection",
"pid": "10",
"text": "批量操作行程模板"
},
{
"children": [],
"id": "14",
"permission": "bussiness:stroke:log",
"pid": "10",
"text": "行程模板日志"
}
],
"id": "10",
"permission": "bussiness:stroke:*",
"pid": "3",
"text": "行程模板"
},
{
"children": [
{
"children": [],
"id": "16",
"permission": "bussiness:roadmanager:add",
"pid": "15",
"text": "新建线路"
},
{
"children": [],
"id": "17",
"permission": "bussiness:roadmanager:update",
"pid": "15",
"text": "修改线路"
},
{
"children": [],
"id": "18",
"permission": "bussiness:roadmanager:collection",
"pid": "15",
"text": "批量操作线路"
},
{
"children": [],
"id": "19",
"permission": "bussiness:roadmanager:log",
"pid": "15",
"text": "线路操作日志"
},
{
"children": [],
"id": "20",
"permission": "bussiness:roadmanager:rubbish",
"pid": "15",
"text": "线路回收站"
}
],
"id": "15",
"permission": "bussiness:roadmanager:*",
"pid": "3",
"text": "线路管理"
}
],
"id": "3",
"permission": "bussiness:road:*",
"pid": "2",
"text": "线路"
},
{
"children": [
{
"children": [],
"id": "22",
"permission": "bussiness:regiment:add",
"pid": "21",
"text": "新建团期"
},
{
"children": [],
"id": "23",
"permission": "bussiness:regiment:newverify",
"pid": "21",
"text": "建团审核"
},
{
"children": [],
"id": "24",
"permission": "bussiness:regiment:update",
"pid": "21",
"text": "修改团期"
},
{
"children": [],
"id": "25",
"permission": "bussiness:regiment:copy",
"pid": "21",
"text": "复制建团"
},
{
"children": [],
"id": "26",
"permission": "bussiness:regiment:delete",
"pid": "21",
"text": "删除团期"
},
{
"children": [],
"id": "27",
"permission": "bussiness:regiment:cancle",
"pid": "21",
"text": "取消团期"
},
{
"children": [],
"id": "28",
"permission": "bussiness:regiment:downandup",
"pid": "21",
"text": "上下线操作"
},
{
"children": [],
"id": "29",
"permission": "bussiness:regiment:seal",
"pid": "21",
"text": "封团/解封"
},
{
"children": [],
"id": "30",
"permission": "bussiness:regiment:sealverify",
"pid": "21",
"text": "封团审核"
},
{
"children": [],
"id": "31",
"permission": "bussiness:regiment:end",
"pid": "21",
"text": "结团操作"
},
{
"children": [],
"id": "32",
"permission": "bussiness:regiment:statistics",
"pid": "21",
"text": "我的统计"
},
{
"children": [],
"id": "33",
"permission": "bussiness:regiment:customerlist",
"pid": "21",
"text": "查看名单"
}
],
"id": "21",
"permission": "bussiness:regiment:*",
"pid": "2",
"text": "团期"
},
{
"children": [
{
"children": [],
"id": "35",
"permission": "bussiness:order:newverify",
"pid": "34",
"text": "新单审核"
},
{
"children": [],
"id": "36",
"permission": "bussiness:order:refundfirstverify",
"pid": "34",
"text": "退款初审"
},
{
"children": [],
"id": "37",
"permission": "bussiness:order:refundlastverify",
"pid": "34",
"text": "退款终审"
},
{
"children": [],
"id": "38",
"permission": "bussiness:order:paysettle",
"pid": "34",
"text": "缴费结算"
},
{
"children": [],
"id": "39",
"permission": "bussiness:order:refundsettle",
"pid": "34",
"text": "退款结算"
},
{
"children": [],
"id": "40",
"permission": "bussiness:order:verify",
"pid": "34",
"text": "修改审核"
},
{
"children": [],
"id": "41",
"permission": "bussiness:order:detail",
"pid": "34",
"text": "订单详情"
}
],
"id": "34",
"permission": "bussiness:order:*",
"pid": "2",
"text": "订单"
},
{
"children": [
{
"children": [
{
"children": [],
"id": "44",
"permission": "bussiness:resource:provider:add",
"pid": "43",
"text": "添加供应商"
},
{
"children": [],
"id": "45",
"permission": "bussiness:resource:provider:update",
"pid": "43",
"text": "修改供应商"
},
{
"children": [],
"id": "46",
"permission": "bussiness:resource:provider:delete",
"pid": "43",
"text": "删除供应商"
}
],
"id": "43",
"permission": "bussiness:resource:provider:*",
"pid": "42",
"text": "供应商管理"
},
{
"children": [
{
"children": [],
"id": "48",
"permission": "bussiness:resource:guide:add",
"pid": "47",
"text": "添加导游"
},
{
"children": [],
"id": "49",
"permission": "bussiness:resource:guide:update",
"pid": "47",
"text": "修改导游"
},
{
"children": [],
"id": "50",
"permission": "bussiness:resource:guide:delete",
"pid": "47",
"text": "删除导游"
},
{
"children": [],
"id": "51",
"permission": "bussiness:resource:guide:guideregiment",
"pid": "47",
"text": "排团表"
}
],
"id": "47",
"permission": "bussiness:resource:guide:*",
"pid": "42",
"text": "导游管理"
}
],
"id": "42",
"permission": "bussiness:resource:*",
"pid": "2",
"text": "资源"
}
],
"id": "2",
"permission": "bussiness:*",
"pid": "0",
"text": "业务"
},
{
"children": [],
"id": "52",
"permission": "customer:*",
"pid": "0",
"text": "客户管理"
},
{
"children": [],
"id": "53",
"permission": "finance:*",
"pid": "0",
"text": "财务"
},
{
"children": [],
"id": "54",
"permission": "numerical:*",
"pid": "0",
"text": "统计报表"
},
{
"children": [
{
"children": [
{
"children": [],
"id": "57",
"permission": "system:employ:addorg",
"pid": "56",
"text": "新建组织"
},
{
"children": [],
"id": "58",
"permission": "system:employ:updateorg",
"pid": "56",
"text": "编辑组织"
},
{
"children": [],
"id": "59",
"permission": "system:employ:deleteorg",
"pid": "56",
"text": "删除组织"
},
{
"children": [],
"id": "60",
"permission": "system:employ:add",
"pid": "56",
"text": "添加员工"
},
{
"children": [],
"id": "61",
"permission": "system:employ:update",
"pid": "56",
"text": "修改员工"
},
{
"children": [],
"id": "62",
"permission": "system:employ:delete",
"pid": "56",
"text": "删除员工"
},
{
"children": [],
"id": "63",
"permission": "system:employ:leave",
"pid": "56",
"text": "标记离职"
}
],
"id": "56",
"permission": "system:employ:*",
"pid": "55",
"text": "员工帐号"
},
{
"children": [
{
"children": [],
"id": "65",
"permission": "system:role:add",
"pid": "64",
"text": "添加角色"
},
{
"children": [],
"id": "66",
"permission": "system:role:update",
"pid": "64",
"text": "修改角色"
},
{
"children": [],
"id": "67",
"permission": "system:role:delete",
"pid": "64",
"text": "删除角色"
}
],
"id": "64",
"permission": "system:role:*",
"pid": "55",
"text": "角色权限设置"
}
],
"id": "55",
"permission": "system:*",
"pid": "0",
"text": "系统配置"
}
]
Roles：所有的角色数据 没有实现权限树的效果，具体实现其实一样，有需要的同学可以实现
[
{
"available": "yes",//是否可用
"children": [//子节点
{
"available": "yes",
"children": [],
"description": "一级管理员",
"id": "2",
"pid": "1",
"text": "一级管理员"
},
{
"available": "yes",
"children": [],
"description": "二级管理员",
"id": "3",
"pid": "1",
"text": "二级管理员"
}
],
"description": "顶级管理员",//
"id": "1",//权限id
"pid": "0",//父id
"text": "系统管理员"//节点文字描述
},
{
"available": "yes",
"children": [
{
"available": "yes",
"children": [],
"description": "董事长",
"id": "5",
"pid": "4",
"text": "董事长"
},
{
"available": "yes",
"children": [],
"description": "总经理",
"id": "6",
"pid": "4",
"text": "总经理"
},
{
"available": "yes",
"children": [],
"description": "大区经理",
"id": "7",
"pid": "4",
"text": "大区经理"
},
{
"available": "yes",
"children": [],
"description": "人事总监",
"id": "8",
"pid": "4",
"text": "人事总监"
},
{
"available": "yes",
"children": [],
"description": "财务总监",
"id": "9",
"pid": "4",
"text": "财务总监"
}
],
"description": "集团领导",
"id": "4",
"pid": "0",
"text": "集团领导"
},
{
"available": "yes",
"children": [
{
"available": "yes",
"children": [
{
"available": "yes",
"children": [],
"description": "业务部经理",
"id": "12",
"pid": "11",
"text": "业务部经理"
},
{
"available": "yes",
"children": [],
"description": "旅游部经理",
"id": "13",
"pid": "11",
"text": "旅游部经理"
}
],
"description": "旅行社社长",
"id": "11",
"pid": "10",
"text": "旅行社社长"
},
{
"available": "yes",
"children": [],
"description": "旅行社主任",
"id": "14",
"pid": "10",
"text": "旅行社主任"
},
{
"available": "yes",
"children": [],
"description": "酒店店长",
"id": "15",
"pid": "10",
"text": "酒店店长"
},
{
"available": "yes",
"children": [],
"description": "酒店主任",
"id": "16",
"pid": "10",
"text": "酒店主任"
}
],
"description": "分公司领导",
"id": "10",
"pid": "0",
"text": "分公司领导"
}
]
② OK数据准备完毕，接下来就是测试效果 ，引入js，css什么的咱就不赘述了，自行参考官网实现。Html代码如下，记得把url对应的值变为json所在的位置，个人使用的是数据库版本，所以书写了对应的controller和service等组件，各位也可以尝试一下。
其中需要注意的是用到的方法：
$("#xxx").tree({…}) js异步加载树形结构
$("#xxx").tree(‘getChecked’{…}) 获取所有选中的子节点
Basic Tree - jQuery EasyUI Demo
Perms Tree
dhhs.perms
您选择的角色为：
您选择的权限有：
感谢各位忍着性子看到这里，下面的代码其实可有可无了，是在尝试的时候写的代码，在完成之后发现其中的冗余程度令人发指，而且只适用固定层级的树结构，故提取出来上面的算是比较精简版的，刚入行的菜鸟，希望大家多多包涵，有兴趣的同学可以看一下最初产品，阿里嘎多。
初心：
Basic Tree - jQuery EasyUI Demo
Perms Tree
dhhs.perms
您选择的角色为：
您选择的权限有：