Crowdfunding：Role Distribution Auth

一、建表

1、权限表：

2、用户分配权限表：

3、逆向工程创建权限表实体类

二、查询全部auth

三、显示模态框

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<div id="roleAssignAuthModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form role="form">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">众筹网系统弹框</h4>
                </div>
                <div class="modal-body">
                    <ul id="treeDemo" class="ztree"></ul>
                </div>
                <div class="modal-footer">
                    <button id="roleAssignAuthBtn" type="button" class="btn btn-primary">
                        分配</button>
                </div>
            </form>
        </div>
    </div>
</div>

修改my-role.js:

var checkBtn ="<button roleId='"+role.id+"' type='button' class='btn btn-success btn-xs checkBtn'><i class=' glyphicon glyphicon-check'></i></button>";

role-page.jsp:

<link rel="stylesheet" href="ztree/zTreeStyle.css">
<script src="ztree/jquery.ztree.all-3.5.min.js"></script>

四、显示auth树

$("#roleTableBody").on("click",".checkBtn",function () {
           $("#roleAssignAuthModal").modal("show");

           //1、创建setting对象
            var setting = {
                "data":{
                    "simpleData":{
                        "enable":true,
                        "pIdKey":"categoryId"
                    },
                    "key":{
                        "name":"title"
                    }
                },
                "check":{
                    "enable":true
                }
            }

           //2、获取JSON数据
            var ajaxResult = $.ajax({
                "url":"assign/get/all/auth.json",
                "type":"post",
                "dataType":"json",
                "async":false
            });
            if (ajaxResult.responseJSON.result == "FAILED"){
                layer.msg(ajaxResult.responseJSON.message);
                return ;
            }
            var zNodes = ajaxResult.responseJSON.data;
            //3、初始化树形结构
            $.fn.zTree.init($("#treeDemo"),setting,zNodes);
            //4、将树形结构展开
            $.fn.zTree.getZTreeObj("treeDemo").expandAll(true);
        });

五、回显已分配的auth

mapper.xml:

mapper.java

$("#roleTableBody").on("click",".checkBtn",function () {
           $("#roleAssignAuthModal").modal("show");

           //1、创建setting对象
            var setting = {
                "data":{
                    "simpleData":{
                        "enable":true,
                        "pIdKey":"categoryId"
                    },
                    "key":{
                        "name":"title"
                    }
                },
                "check":{
                    "enable":true
                }
            }

           //2、获取JSON数据
            var ajaxResult = $.ajax({
                "url":"assign/get/all/auth.json",
                "type":"post",
                "dataType":"json",
                "async":false
            });
            if (ajaxResult.responseJSON.result == "FAILED"){
                layer.msg(ajaxResult.responseJSON.message);
                return ;
            }
            var zNodes = ajaxResult.responseJSON.data;
            //3、初始化树形结构
            $.fn.zTree.init($("#treeDemo"),setting,zNodes);
            //4、将树形结构展开
            $.fn.zTree.getZTreeObj("treeDemo").expandAll(true);
            //5、查询以前已经分配过的authId
            ajaxResult = $.ajax({
                "url":"assign/get/assigned/auth/id/list.json",
                "type":"post",
                "data":{
                    "roleId":$(this).attr("roleId"),
                    "random":Math.random()
                },
                "dataType":"json",
                "async":false
            });
            if (ajaxResult.responseJSON.result == "FAILED"){
                layer.msg(ajaxResult.responseJSON.message);
                return ;
            }
            var authIdList = ajaxResult.responseJSON.data;
            console.log(authIdList);
            //6、使用authIdList勾选对应的树形节点
            //遍历authIdList
            for (var i = 0;i<authIdList.length;i++){
                //遍历过程中获取每一个authId
                var authId = authIdList[i];
                //根据authId查询到一个具体的树形节点
                //key是查询到的节点属性名，value是属性值，这里使用authId
                var key = "id";
                var treeNode =  $.fn.zTree.getZTreeObj("treeDemo").getNodeByParam(key,authId);
                //勾选找到的节点，treeNode是要勾选的节点，true表示要勾选
                //false:不联动，联动的情况下子菜单的勾选会导致父菜单勾选，父菜单勾选就会把其他子菜单勾选，进而产生错误。
                $.fn.zTree.getZTreeObj("treeDemo").checkNode(treeNode,true,false);
            }
        });

六、执行分配

        //给出模态框中的分配按钮绑定单击响应函数
        $("#roleAssignAuthBtn").click(function () {
            var authIdArray = new Array();
            //调用zTreeObj的方法获取当前已经被勾选的节点
            var checkedNodes = $.fn.zTree.getZTreeObj("treeDemo").getCheckedNodes();
            //遍历checkedNodes
            for (var i = 0;i<checkedNodes.length;i++){
                //获取具体一个节点
                var node = checkedNodes[i];
                //获取当前节点的id属性
                var authId = node.id;
                //将authId存入数组
                authIdArray.push(authId);
            }
            //在handler方法中使用@RequestBody接收
            //@RequestBody Map<String,List<Integer>>
            //{"roleIdList":"authIdList":[2,3,5,7]}
            //封装要发送给handler的JSON数据
            var requestBody = {"roleIdList":[window.roleId],"authIdList":authIdArray};

            //发送请求
            var ajaxResult = $.ajax({
                "url":"assign/do/assign.json",
                "type":"post",
                "data":JSON.stringify(requestBody),
                "contentType":"application/json;charset=UTF-8",
                "dataType":"json",
                "async":false
            });
            if (ajaxResult.responseJSON.result == "SUCCESS"){
                layer.msg("操作成功！");
            }
            if (ajaxResult.responseJSON.result == "FAILED"){
                layer.msg(ajaxResult.responseJSON.message);
            }
            $("#roleAssignAuthModal").modal("hide");
        });