1 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值
2 权限
2.1 表关系
2.2 通过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'
2.3 授权功能
2.3.1 效果展示
1.展示权限列表
2.点击授权跳转到授权页面
2.3.2 思考
前端需要的数据格式如下,使用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即可
2.3.3 展示权限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
2.3.4 展示权限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(); } } }
2.3.5 展示权限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); }
2.3.6 展示权限前端
$(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:展开所有 });
2.4 修改权限
表单数据如下
第一步:给保存按钮添加单击事件,单击时获取所有的被选中的复选框的值,然后拼接成字符串赋值给#moduleIds
第二步:服务器Servlet直接获取表单数据,调用service