ZTree入门权限管理
ztree入门
第一步:引入ztree相关资源
<!--引入jqurey-->
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<!--引入ztree-->
<link rel="stylesheet" type="text/css" href="css/zTreeStyle/zTreeStyle.css">
<script type="text/javascript" src="js/jquery.ztree.core-3.5.min.js"></script>
<script type="text/javascript" src="js/jquery.ztree.excheck-3.5.min.js"></script>
第二步: 创建ztree容器,存放树
<ul id="treeDemo" class="ztree"></ul>
第三步:初始化ztree
<script>
$(function () {
//菜单
var zNodes =[
{ id:11, pId:1, name:"随意勾选 1-1", checked:true},
{ id:111, pId:11, name:"随意勾选 1-1-1",checked:true},
{ id:112, pId:11, name:"随意勾选 1-1-2",checked:true},
{ id:12, pId:1, name:"随意勾选 1-2",checked:true},
{ id:121, pId:12, name:"随意勾选 1-2-1",checked:false},
{ id:122, pId:12, name:"随意勾选 1-2-2",checked:false},
{ id:2, pId:0, name:"随意勾选 2", checked:true},
{ id:21, pId:2, name:"随意勾选 2-1",checked:false},
{ id:22, pId:2, name:"随意勾选 2-2",checked:true},
{ id:221, pId:22, name:"随意勾选 2-2-1", checked:true},
{ id:222, pId:22, name:"随意勾选 2-2-2",checked:false},
{ id:23, pId:2, name:"随意勾选 2-3",checked:false},
{ id:1, pId:0, name:"随意勾选 1",checked:true}
];
//配置
var setting = {
check: {
enable: true,//启用复选框
chkboxType: {"Y": "ps", "N": "ps"}//子被选中父也被选中,父被选中,所有的子都被选中
},
data: {
simpleData: {
enable: true
}
}
};
//第一个参数为zTree的DOM容器,第二个为zTree设置详情可见官网api,第三个为zTree的节点数据,expandAll(true)表示默认展开树
$.fn.zTree.init($("#treeDemo"), setting, zNodes).expandAll(true);
});
</script>
获取选中的节点
var arr = $.fn.zTree.getZTreeObj("treeDemo").getCheckedNodes();//treeDemo是ztree树的ID值
权限
表关系
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4wXpCs2U-1608047844279)(imgs\1591945218617.png)]
通过SQL查询某个用户对应的模块
SELECT
su.`user_name`,
sm.`name`
FROM ss_user su
LEFT JOIN ss_role_user sru ON su.`user_id` = sru.`user_id`
LEFT JOIN ss_role sr ON sru.`role_id` = sr.`role_id`
LEFT JOIN ss_role_module srm ON srm.`role_id` = sr.`role_id`
LEFT JOIN ss_module sm ON srm.`module_id` = sm.`module_id`
WHERE su.`user_id` = 'e0de22fe-2c50-4216-ad75-ed0494d2dc92'
授权功能
效果展示
1.展示权限列表
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GIqLvf9P-1608047844281)(imgs\1591891672730.png)]
2.点击授权跳转到授权页面
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GAtR8ZQH-1608047844282)(imgs\1591891690106.png)]
思考
前端需要的数据格式如下,使用java如何生成JSON格式的字符串:"[{}{}{}]"
var zNodes =[
{ id:11, pId:1, name:"随意勾选 1-1", open:true},
{ id:111, pId:11, name:"随意勾选 1-1-1"},
{ id:112, pId:11, name:"随意勾选 1-1-2"},
{ id:12, pId:1, name:"随意勾选 1-2", open:true},
{ id:121, pId:12, name:"随意勾选 1-2-1"},
{ id:122, pId:12, name:"随意勾选 1-2-2"},
{ id:2, pId:0, name:"随意勾选 2", checked:true, open:true},
{ id:21, pId:2, name:"随意勾选 2-1"},
{ id:22, pId:2, name:"随意勾选 2-2", open:true},
{ id:221, pId:22, name:"随意勾选 2-2-1", checked:true},
{ id:222, pId:22, name:"随意勾选 2-2-2"},
{ id:23, pId:2, name:"随意勾选 2-3"},
{ id:1, pId:0, name:"随意勾选 1", open:true}
];
后端的java怎么才能生成该格式的JSON数据
ArrayList<Map<String,String>> list = new ArrayList<>
Map<String,String> row1 = new HashMap<String,String>;
row1.put("id",11);
row1.put("pId",1);
row1.put("name","xx");
row1.put("checked","true");
Map<String,String> row2 = new HashMap<String,String>;
row2.put("id",11);
row2.put("pId",1);
row2.put("name","xx");
row2.put("checked","true");
list.add(row1);list.add(row2)
把该list转成JSON即可
展示权限Dao
List<Map> findAuthorDataByRoleId(String roleId);
<select id="findAuthorDataByRoleId" parameterType="string" resultType="java.util.Map">
select
module_id as id,
parent_id as pId,
name as name,
case
when module_id in (select module_id from ss_role_module where role_id = #{roleId})
then 'true'
else 'false'
end
as checked
from
ss_module
</select>
SQL
SELECT
module_id 'id',
parent_id 'pId',
NAME 'name',
CASE
WHEN module_id IN (SELECT module_id FROM ss_role_module WHERE role_id='4028a1c34ec2e5c8014ec2ebf8430001')
THEN 'true'
ELSE 'false'
END AS 'checked'
FROM ss_module
展示权限Service
@Override
public List<Role> findAllRoleByUserId(String userId) {
SqlSession sqlSession = null;
try{
//1.获取SqlSession
sqlSession = MapperFactory.getSqlSession();
//2.获取Dao
RoleDao roleDao = MapperFactory.getMapper(sqlSession,RoleDao.class);
//3.调用Dao层操作
return roleDao.findAllRoleByUserId(userId);
}catch (Exception e){
throw new RuntimeException(e);
//记录日志
}finally {
try {
TransactionUtil.close(sqlSession);
}catch (Exception e){
e.printStackTrace();
}
}
}
展示权限RoleServlet
private void author(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException {
//获取要授权的角色id
String roleId = request.getParameter("id");
//使用id查询对应的数据(角色id对应的模块信息)
Role role = roleService.findById(roleId);
request.setAttribute("role",role);
//根据当前的角色id获取所有的模块数据,并加载关系数据
List<Map> map = moduleService.findAuthorDataByRoleId(roleId);
//map转成json数据
ObjectMapper om = new ObjectMapper();
String json = om.writeValueAsString(map);
request.setAttribute("roleModuleJson",json);
// TODO 数据未查询
//跳转到树页面中
request.getRequestDispatcher("/WEB-INF/pages/system/role/author.jsp").forward(request,response);
}
展示权限前端
$(document).ready(function(){
// 定义页面对应的树形组件
var zTreeObj;
var setting = {check: {enable: true},data: {simpleData: {enable: true}}};
var zNodes =${roleModuleJson}
zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes)
var zTree = $.fn.zTree.getZTreeObj("treeDemo")
zTree.setting.check.chkboxType = { "Y" : "ps", "N" : "ps" }
zTreeObj.expandAll(true);//true:展开所有
});
修改权限
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xqO9ZoeD-1608047844285)(imgs\1591954983893.png)]
表单数据如下
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qworo4oz-1608047844288)(imgs\1591956488066.png)]
第一步:给保存按钮添加单击事件,单击时获取所有的被选中的复选框的值,然后拼接成字符串赋值给#moduleIds
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-I5z9vIn2-1608047844289)(imgs\1591956678301.png)]
第二步:服务器Servlet直接获取表单数据,调用service
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Vwfmr0ZZ-1608047844290)(imgs\1591956783325.png)]
上一篇: mongodb权限管理01
下一篇: 项目琐碎知识点