JavaEE权限管理系统的搭建(八)--------角色的增删改

如下图所示，添加角色的同时，要给角色分配权限菜单，关于权限数的显示，我实现了两种方式，普通方式和Ztree方式，

普通方式展示树：

主要代码部分：

/**
     * 进入角色添加页面
     * @param model
     * @return
     */
    @AccessPermissionsInfo("role:add")
    @RequestMapping(value = "/role-add.action",method = RequestMethod.GET)
    public String roleAddPage(Model model){

        Role role = new Role();
        model.addAttribute("role",role);

        //获取所有权限集合
        List<Permission> allPermissionsList =
                permissionService.findAllPermission();

        //储存的是根节点集合
        List<Permission> permissionsList = new ArrayList<Permission>();
        //获取所有根节点
        for(Permission p:allPermissionsList){
            if(p.getParentId().toString().equals("0")||
                    Integer.parseInt(p.getParentId().toString())==0){
                permissionsList.add(p);
            }
        }

        //遍历根节点集合，为根节点设置子节点
        for(Permission p:permissionsList){
            //findChild方法递归查找子节点
            p.setChildPermissions(findChild(p.getId(),allPermissionsList));
        }

        model.addAttribute("permissionsList",permissionsList);

        return "role-add";
    }


    /**
     * 查找子节点
     * @param id 父节点的ID
     * @param allPermissionsList 所有权限的集合
     * @return
     */
    private List<Permission> findChild(Integer id,
                                       List<Permission> allPermissionsList) {

        List<Permission> childPermissions = new ArrayList<Permission>();
        //遍历所有权限列表
        for(Permission p:allPermissionsList){
            //如果子节点的parentId等于父节点的ID
            if(p.getParentId().equals(id)){
                //添加到子节点
                childPermissions.add(p);
            }
        }

        //再次循环子菜单
        for(Permission p:childPermissions){
            p.setChildPermissions(findChild(p.getId(),allPermissionsList));
        }


        if(childPermissions.size()==0){
            return null;
        }

        return childPermissions;

    }


    /**
     * 添加角色信息
     * @param request
     * @return
     */
    @AccessPermissionsInfo("role:add")
    @RequestMapping(value = "/role-add.action",method = RequestMethod.POST)
    @ResponseBody
    public Map<String,Object> roleAdd(HttpServletRequest request)
    {
        Map<String,Object> resultMap = new HashMap<String,Object>();

        String[] ids = request.getParameterValues("pers");

        if(request.getParameter("roleName")==null||
                request.getParameter("roleRemark")==null)
        {
            resultMap.put("result","参数异常");
        }else if(ids==null||ids.length<=0)
        {
            resultMap.put("result","请给角色至少分配一个权限");
        }else
        {
            String roleName = request.getParameter("roleName").toString();
            String roleRemark = request.getParameter("roleRemark").toString();
            AdminUser adminUser = (AdminUser)request.getSession().getAttribute("adminUser");
            if(adminUser!=null){
                Role role = roleService.findRoleByRoleName(roleName);
                if(role==null){
                    Role role2 = new Role();
                    role2.setRoleName(roleName);
                    role2.setRoleRemark(roleRemark);
                    int count = roleService.addRole(role2,ids);
                    if(count>0){
                        resultMap.put("result","SUCCESS");
                    }else
                    {
                        resultMap.put("result","操作失败");
                    }
                }else
                {
                    resultMap.put("result","角色已存在");
                }

            }else
            {
                resultMap.put("result","登录超时，请重新登录");
            }
        }

        return resultMap;
    }

页面的展示：

role_add.jsp

<%--
  Created by IntelliJ IDEA.
  User: shaojiang
  Date: 2019/1/26
  Time: 下午2:43
  To change this template use File | Settings | File Templates.
--%>
<%--
  Created by IntelliJ IDEA.
  User: shaojiang
  Date: 2018/12/22
  Time: 下午9:32
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!--_meta 作为公共模版分离出去-->
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="Bookmark" href="/favicon.ico" >
    <link rel="Shortcut Icon" href="/favicon.ico" />
    <!--[if lt IE 9]>
    <script type="text/javascript" src="/statics/lib/html5shiv.js"></script>
    <script type="text/javascript" src="/statics/lib/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" type="text/css" href="/statics/h-ui/css/H-ui.min.css" />
    <link rel="stylesheet" type="text/css" href="/statics/h-ui.admin/css/H-ui.admin.css" />
    <link rel="stylesheet" type="text/css" href="/statics/lib/Hui-iconfont/1.0.8/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="/statics/h-ui.admin/skin/default/skin.css" id="skin" />
    <link rel="stylesheet" type="text/css" href="/statics/h-ui.admin/css/style.css" />
    <%--zTree样式表--%>
    <link rel="stylesheet" type="text/css" href="/statics/lib/zTree/v3/css/zTreeStyle/zTreeStyle.css" />
    <!--[if IE 6]>
    <script type="text/javascript" src="/statics/lib/DD_belatedPNG_0.0.8a-min.js" ></script>
    <script>DD_belatedPNG.fix('*');</script>
    <![endif]-->
    <!--/meta 作为公共模版分离出去-->
    <title>H-ui.admin v3.1</title>
</head>
<body>
<article class="page-container">
    <form:form modelAttribute="role" action="##" onsubmit="return false" class="form form-horizontal" id="form-role-add">
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>角色名称：</label>
            <div class="formControls col-xs-8 col-sm-9">
                    <%--<input type="text" class="input-text" value="${requestScope.role.roleName}" placeholder="" id="roleName" name="roleName">--%>
                <form:input path="roleName" cssClass="input-text"/>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">角色备注：</label>
            <div class="formControls col-xs-8 col-sm-9">
                    <%--<input type="text" class="input-text" value="${requestScope.role.remark}" placeholder="" id="" name="">--%>
                <form:input path="roleRemark" cssClass="input-text"/>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">资源权限：</label>
            <ul class=" formControls col-xs-8 col-sm-9">

                <c:forEach  var="item"  items="${requestScope.permissionsList}" begin="0">
                    <dl class="permission-list">
                        <dt>
                            <label>
                                <input type="checkbox" value="${item.id}" name="pers">
                                    ${item.name}</label>
                        </dt>
                        <dd>
                            <c:forEach var="sub_item" items="${item.childPermissions}" begin="0" >
                                <dl class="cl permission-list2">
                                    <dt>
                                        <label class="">
                                            <input type="checkbox" value="${sub_item.id}" name="pers">
                                                ${sub_item.name}</label>
                                    </dt>
                                    <dd>
                                        <c:forEach var="sub_subitem" items="${sub_item.childPermissions}" begin="0" >
                                            <label class="">
                                                <input type="checkbox" value="${sub_subitem.id}" name="pers">
                                                    ${sub_subitem.name}</label>
                                        </c:forEach>
                                    </dd>
                                </dl>
                            </c:forEach>
                        </dd>
                    </dl>
                </c:forEach>

            </div>
        </div>
        <div class="row cl">
            <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                <button type="button" class="btn btn-success radius" id="role-save" name="admin-role-save"><i class="icon-ok"></i> 确定</button>
            </div>
        </div>
    </form:form>
</article>

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="/statics/lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="/statics/lib/plug-ins/pagination/pagination.js"></script>
<script type="text/javascript" src="/statics/lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="/statics/lib/zTree/v3/js/jquery.ztree.core-3.5.min.js"></script>
<script type="text/javascript" src="/statics/lib/zTree/v3/js/jquery.ztree.excheck-3.5.min.js"></script>
<script type="text/javascript">


    $(function(){

        $(".permission-list dt input:checkbox").click(function(){
            $(this).closest("dl").find("dd input:checkbox").prop("checked",$(this).prop("checked"));
        });

        $(".permission-list2 dt input:checkbox").click(function(){

            var l =$(this).parent().find("input:checked").length;
            var l2=$(this).parents(".permission-list").find(".permission-list2 dd").find("input:checked").length;

            if($(this).prop("checked")){
                $(this).closest("dl").find("dt input:checkbox").prop("checked",true);
                $(this).parents(".permission-list").find("dt").first().find("input:checkbox").prop("checked",true);
            }
            else{
                if(l==0){
                    $(this).closest("dl").find("dt input:checkbox").prop("checked",false);
                }
                if(l2==0){
                    $(this).parents(".permission-list").find("dt").first().find("input:checkbox").prop("checked",false);
                }
            }
        });

        $(".permission-list2 dd input:checkbox").click(function(){
            var l =$(this).parent().parent().find("input:checked").length;
            var l2=$(this).parents(".permission-list").find(".permission-list2 dd").find("input:checked").length;

            if($(this).prop("checked")){
                $(this).closest("dl").find("dt input:checkbox").prop("checked",true);
                $(this).parents(".permission-list").find("dt").first().find("input:checkbox").prop("checked",true);
            }
            else{
                if(l==0){
                    $(this).closest("dl").find("dt input:checkbox").prop("checked",false);
                }
                if(l2==0){
                    $(this).parents(".permission-list").find("dt").first().find("input:checkbox").prop("checked",false);
                }
            }
        });




        $("#role-save").click(function () {


            //第二种方法获取全部选中的ID
            var values = $("input[name='pers']:checked").map(function(){
                return $(this).val();
            }).get();

            var roleName = $("#roleName").val();
            var roleRemark = $("#roleRemark").val();
            if(!roleName){
                layer.msg("请输入角色名称");
                $("#roleName").select();
                return false;
            }else if(roleName.length>12)
            {
                layer.msg("不能超过12个字符");
                $("#roleName").select();
                return false;
            }else if(!roleRemark){
                layer.msg("请输入角色备注");
                $("#roleRemark").select();
                return false;
            }else if(roleRemark.length>12)
            {
                layer.msg("不能超过30个字符");
                $("#roleRemark").select();
                return false;
            }else if(values.length<=0)
            {
                layer.msg("请给角色至少分配一个权限");
                return false;
            }else
            {
                //提交表单
                var yesForm = $("#form-role-add").serialize();
                alert(yesForm);

                $.ajax({
                    //几个参数需要注意一下
                    type: "POST",//方法类型
                    dataType: "json",//预期服务器返回的数据类型
                    url: "/admin/role/role-add.action" ,//url
                    data:yesForm,
                    success: function (data) {
                        console.log(data.result);//打印服务端返回的数据(调试用)
                        if (data.result == 'SUCCESS'||data.result == 200) {
                            layer.msg("保存成功",{icon:1,time:2000});
                        }else
                        {
                            layer.msg("保存失败:"+data.result.toString(),{icon:5,time:2000});
                        }
                    },
                    error : function() {
                        layer.msg(data.result.toString());
                    }
                });
            }


        });


    });










//    var setting = {
//        view: {
//            dblClickExpand: true,//双击节点时，是否自动展开父节点的标识
//            showLine: true,//是否显示节点之间的连线
//            fontCss:{'color':'black','font-weight':'bold'},//字体样式函数
//            selectedMulti: false //设置是否允许同时选中多个节点
//        },
//        check:{
//            //chkboxType: { "Y": "ps", "N": "ps" },
//            chkStyle: "checkbox",//复选框类型
//            enable: true //每个节点上是否显示 CheckBox
//        },
//        data: {
//            simpleData: {//简单数据模式
//                enable:true,
//                idKey: "id",
//                pIdKey: "parentId",
//                rootPId: ""
//            }
//        },
//        callback: {
//            beforeClick: function(treeId, treeNode) {
//                zTree = $.fn.zTree.getZTreeObj("per_tree");
//                if (treeNode.isParent) {
//                    zTree.expandNode(treeNode);//如果是父节点，则展开该节点
//                }else{
//                    zTree.checkNode(treeNode, !treeNode.checked, true, true);//单击勾选，再次单击取消勾选
//                }
//            }
//        }//每个节点上是否显示 CheckBox
//    };
//
//    function onCheck(e,treeId,treeNode){
//        var treeObj=$.fn.zTree.getZTreeObj("per_tree"),
//            nodes=treeObj.getCheckedNodes(true),
//            v="";
//        for(var i=0;i<nodes.length;i++){
//            v+=nodes[i].name + ",";
//            alert(nodes[i].id); //获取选中节点的值
//        }
//    }
//
//
//    function loadPerData() {
//
//        var treeNodes;
//
//        $.ajax({
//            async:false,//是否异步
//            cache:false,//是否使用缓存
//            type:'POST',//请求方式：post
//            dataType:'json',//数据传输格式：json
//            url:'/admin/per/loadPermissionZTree.action',//请求的action路径
//            error:function(){
//                //请求失败处理函数
//                layer.msg("请求失败",{icon:5,time:3000});
//            },
//            success:function(data){
//                //console.log(data);
//                alert(data.toString());
//                //请求成功后处理函数
//                treeNodes = data;//把后台封装好的简单Json格式赋给treeNodes
//            }
//        });
//
//        //初始化zTree,展开所有节点
//        var t = $("#per_tree");
//        t = $.fn.zTree.init(t, setting, treeNodes).expandAll(true);
//
//
//    }
//
//    $(function(){
//        //从数据库获取所有权限数据加载到配置属性zNodes中
//        loadPerData();
//    });
</script>
<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>

下图使用了Ztree展示树

ztree_role_add.jsp页面部分：

<%--
  Created by IntelliJ IDEA.
  User: shaojiang
  Date: 2019/1/26
  Time: 下午2:43
  To change this template use File | Settings | File Templates.
--%>
<%--
  Created by IntelliJ IDEA.
  User: shaojiang
  Date: 2018/12/22
  Time: 下午9:32
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!--_meta 作为公共模版分离出去-->
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="Bookmark" href="/favicon.ico" >
    <link rel="Shortcut Icon" href="/favicon.ico" />
    <!--[if lt IE 9]>
    <script type="text/javascript" src="/statics/lib/html5shiv.js"></script>
    <script type="text/javascript" src="/statics/lib/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" type="text/css" href="/statics/h-ui/css/H-ui.min.css" />
    <link rel="stylesheet" type="text/css" href="/statics/h-ui.admin/css/H-ui.admin.css" />
    <link rel="stylesheet" type="text/css" href="/statics/lib/Hui-iconfont/1.0.8/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="/statics/h-ui.admin/skin/default/skin.css" id="skin" />
    <link rel="stylesheet" type="text/css" href="/statics/h-ui.admin/css/style.css" />
    <%--zTree样式表--%>
    <link rel="stylesheet" type="text/css" href="/statics/lib/zTree/v3/css/zTreeStyle/zTreeStyle.css" />
    <!--[if IE 6]>
    <script type="text/javascript" src="/statics/lib/DD_belatedPNG_0.0.8a-min.js" ></script>
    <script>DD_belatedPNG.fix('*');</script>
    <![endif]-->
    <!--/meta 作为公共模版分离出去-->
    <title>H-ui.admin v3.1</title>
    <style>
        <%--修改ztree显示样式--%>
        ul.ztree li span.button.switch{margin-right:5px}
        ul.ztree ul ul li{display:inline-block;white-space:normal}
        ul.ztree>li>ul>li{padding:5px}
        ul.ztree>li{background: #dae6f0}
        ul.ztree>li:nth-child(even)>ul>li:nth-child(even){background: #eef5fa}
        ul.ztree>li:nth-child(even)>ul>li:nth-child(odd){background: #f6fbff}
        ul.ztree>li:nth-child(odd)>ul>li:nth-child(even){background: #eef5fa}
        ul.ztree>li:nth-child(odd)>ul>li:nth-child(odd){background: #f6fbff}
        ul.ztree>li>ul{margin-top:12px}
        ul.ztree>li{padding:15px;padding-right:25px}
        ul.ztree li{white-space:normal!important}
        ul.ztree>li>a>span{font-size:15px;font-weight:700}
    </style>
</head>
<body>
<article class="page-container">
    <form:form modelAttribute="role" action="##" onsubmit="return false" class="form form-horizontal" id="form-role-add">
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>角色名称：</label>
            <div class="formControls col-xs-8 col-sm-9">
                    <%--<input type="text" class="input-text" value="${requestScope.role.roleName}" placeholder="" id="roleName" name="roleName">--%>
                <form:input path="roleName" cssClass="input-text"/>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">角色备注：</label>
            <div class="formControls col-xs-8 col-sm-9">
                    <%--<input type="text" class="input-text" value="${requestScope.role.remark}" placeholder="" id="" name="">--%>
                <form:input path="roleRemark" cssClass="input-text"/>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">资源权限：</label>
            <ul class=" formControls col-xs-8 col-sm-9">

                <div>
                    <ul class="ztree" id="perZtree" >
                    </ul>
                </div>
            </ul>

        </div>
        </div>
        <div class="row cl">
            <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                <button type="button" class="btn btn-success radius" id="role-save" name="admin-role-save"><i class="icon-ok"></i> 确定</button>
            </div>
        </div>
    </form:form>
</article>

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="/statics/lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="/statics/lib/plug-ins/pagination/pagination.js"></script>
<script type="text/javascript" src="/statics/lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="/statics/lib/zTree/v3/js/jquery.ztree.core-3.5.min.js"></script>
<script type="text/javascript" src="/statics/lib/zTree/v3/js/jquery.ztree.excheck-3.5.min.js"></script>
<script type="text/javascript">

    var values;


    $(function(){
        //从数据库获取所有权限数据加载到配置属性zNodes中
        loadPerData();


        $("#role-save").click(function()
        {
            var values="";
            var treeObj=$.fn.zTree.getZTreeObj("perZtree");
            var nodes=treeObj.getCheckedNodes(true);
            for(var i=0;i<nodes.length;i++){
                values+=nodes[i].id + ",";
            }

            values=values.substr(0,values.length-1);


            var roleName = $("#roleName").val();
            var roleRemark = $("#roleRemark").val();
            if(!roleName){
                layer.msg("请输入角色名称");
                $("#roleName").select();
                return false;
            }else if(roleName.length>12)
            {
                layer.msg("不能超过12个字符");
                $("#roleName").select();
                return false;
            }else if(!roleRemark){
                layer.msg("请输入角色备注");
                $("#roleRemark").select();
                return false;
            }else if(roleRemark.length>12)
            {
                layer.msg("不能超过30个字符");
                $("#roleRemark").select();
                return false;
            }else if(values.length<=0)
            {
                layer.msg("请给角色至少分配一个权限");
                return false;
            }else
            {

                var formStr = "roleName="+roleName+"&";
                formStr += "roleRemark="+roleRemark+"&";
                formStr += "pers="+values;
                //提交表单
//                var yesForm = $("#form-role-add").serialize();
                alert(formStr);

                $.ajax({
                    //几个参数需要注意一下
                    type: "POST",//方法类型
                    dataType: "json",//预期服务器返回的数据类型
                    url: "/admin/role/ztree-role-add.action" ,//url
                    data:formStr,
                    success: function (data) {
                        console.log(data.result);//打印服务端返回的数据(调试用)
                        if (data.result == 'SUCCESS'||data.result == 200) {
                            layer.msg("保存成功",{icon:1,time:2000});
                        }else
                        {
                            layer.msg("保存失败:"+data.result.toString(),{icon:5,time:2000});
                        }
                    },
                    error : function() {
                        layer.msg(data.result.toString());
                    }
                });
            }

        });
    });



    function onCheck(e,treeId,treeNode){
        var treeObj=$.fn.zTree.getZTreeObj("perZtree"),
            nodes=treeObj.getCheckedNodes(true),
            v="";
        for(var i=0;i<nodes.length;i++){
            v+=nodes[i].name + ",";
            console.log(nodes[i].id); //获取选中节点的值
            values.put(nodes[i].id);
        }
    }


    function loadPerData() {

        var treeNodes = [
            {"id":1, "pId":0, "name":"test1"},
            {"id":11, "pId":1, "name":"test11"},
            {"id":12, "pId":1, "name":"test12"},
            {"id":111, "pId":11, "name":"test111"}
            ];

        var setting = {
            view: {
                dblClickExpand: false,//双击节点时，是否自动展开父节点的标识
                showLine: true,//是否显示节点之间的连线
                fontCss:{'color':'black','font-weight':'bold'},//字体样式函数
                selectedMulti: false //设置是否允许同时选中多个节点
            },
            check:{
                //chkboxType: { "Y": "ps", "N": "ps" },
                chkStyle: "checkbox",//复选框类型
                enable: true //每个节点上是否显示 CheckBox
            },
            data: {
                key:{
                    url:"xUrl"//后台数据使用了url,如果不想点击节点后跳转，设置不存在的URL即可
                },
                simpleData: {//简单数据模式
                    enable:true,
                    idKey: "id",
                    pIdKey: "parentId",
                    rootPId: ""
                }
            }
        };


        $.ajax({
            async:false,//是否异步
            cache:false,//是否使用缓存
            type:'POST',//请求方式：post
            dataType:'json',//数据传输格式：json
            url:'/admin/role/loadPermissionZTree.action',//请求的action路径
            error:function(){
                //请求失败处理函数
                layer.msg("请求失败",{icon:5,time:3000});
            },
            success:function(data){
                //console.log(data);
                //alert(data.toString());
                //请求成功后处理函数
                treeNodes = data;//把后台封装好的简单Json格式赋给treeNodes
            }
        });

        //初始化zTree,展开所有节点
        var t = $("#perZtree");
        t = $.fn.zTree.init(t, setting, treeNodes).expandAll(true);


    }

</script>
<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>

/**
     * 加载所有权限树
     * @return
     */
    @AccessPermissionsInfo("role:list")
    @RequestMapping(value = "/loadPermissionZTree.action",method = RequestMethod.POST)
    @ResponseBody
    public List<Permission> loadPermissionZTree()
    {
        //获取所有权限集合
        List<Permission> allPermissionsList =
                permissionService.findAllPermission();
        return allPermissionsList;
    }

 /**
     * ztree样式添加角色信息
     * @param request
     * @return
     */
    @AccessPermissionsInfo("role:add")
    @RequestMapping(value = "/ztree-role-add.action",method = RequestMethod.POST)
    @ResponseBody
    public Map<String,Object> zTreeRoleAdd(HttpServletRequest request)
    {
        Map<String,Object> resultMap = new HashMap<String,Object>();

        String ids = request.getParameter("pers");
        //转换成数组
        String[] pers = ids.split(",");

        if(request.getParameter("roleName")==null||
                request.getParameter("roleRemark")==null)
        {
            resultMap.put("result","参数异常");
        }else if(pers==null||pers.length<=0)
        {
            resultMap.put("result","请给角色至少分配一个权限");
        }else
        {
            String roleName = request.getParameter("roleName").toString();
            String roleRemark = request.getParameter("roleRemark").toString();
            AdminUser adminUser = (AdminUser)request.getSession().getAttribute("adminUser");
            if(adminUser!=null){
                Role role = roleService.findRoleByRoleName(roleName);
                if(role==null){
                    Role role2 = new Role();
                    role2.setRoleName(roleName);
                    role2.setRoleRemark(roleRemark);
                    int count = roleService.addRole(role2,pers);
                    if(count>0){
                        resultMap.put("result","SUCCESS");
                    }else
                    {
                        resultMap.put("result","操作失败");
                    }
                }else
                {
                    resultMap.put("result","角色已存在");
                }

            }else
            {
                resultMap.put("result","登录超时，请重新登录");
            }
        }

        return resultMap;
    }

不管使用哪种方式添加和展示，这里面最终都调用了这两个方法：roleService.findRoleByRoleName(roleName)和roleService.addRole(role2,pers);

 /**
     * 添加角色
     *
     * @param role 角色信息
     * @param ids  角色关联的权限ID数组
     * @return
     */
    @Override
    public int addRole(Role role, String[] ids) {

        //执行成功条数
        int successCount = 0;
        //添加角色信息
        successCount = roleDao.addRole(role);

        //取得添加成功后返回的ID编号
        String roleId = role.getId().toString();

        //循环遍历权限ID数组，执行插入角色权限关联信息
        for (String pId :ids)
        {
            successCount +=roleDao.addRolePermissionRelation(roleId,pId);
        }

        return successCount;
    }

持久层：

<!--对应RoleDao接口文件中的findRoleByRoleName方法,参数类型string-->
    <select id="findRoleByRoleName" parameterType="string"
            resultType="com.supin51.domain.Role" >
        SELECT * FROM t_role
        WHERE roleName = #{roleName}
    </select>

 <!--对应RoleDao接口文件中的addRole方法,参数类型role，使用主键自增，返回新增主键-->
    <insert id="addRole" useGeneratedKeys="true" keyProperty="id" keyColumn="id" >

        <!--order="BEFORE"会在insert语句之前执行,使用selectKey元素自定义主键的生成
            返回要插入的ID，如果没有记录，返回ID为1，否则返回最后的ID+1（每次插入递增1）,这样可以自定义ID编号规则-->
        <selectKey keyProperty="id" resultType="int" order="BEFORE" statementType="PREPARED" >
            SELECT if(MAX(id)=NULL,1,MAX(id)+1) FROM t_role
        </selectKey>

        <!--注意这里使用了动态插入sql-->
        INSERT INTO t_role
        <trim prefix="(" suffix=")" suffixOverrides=",">
            <if test="id != null"> id, </if>
            <if test="roleName != null">roleName,</if>
            <if test="roleRemark != null">roleRemark, </if>
        </trim>
        <trim prefix="values (" suffix=")" suffixOverrides=",">
            <if test="id != null"> #{id,jdbcType=BIGINT},</if>
            <if test="roleName != null">#{roleName,jdbcType=VARCHAR},</if>
            <if test="roleRemark != null">#{roleRemark,jdbcType=VARCHAR}, </if>
        </trim>
    </insert>

角色的删除

 /**
     * 删除角色信息
     * @param request
     * @return
     */
    @AccessPermissionsInfo("role:delete")
    @RequestMapping(value = "/role-delete.action",method = RequestMethod.POST)
    @ResponseBody
    public Map<String,Object> deleteAdminUser(HttpServletRequest request)
    {
        //接收角色编号
        String str_ids = request.getParameter("ids");
        str_ids = str_ids.replace("/","");//替换掉/
        //转换成数组
        String[] ids = str_ids.split(","); // 用,分割
        //logger.info(Arrays.toString(ids));

        Map<String,Object> resultMap = new HashMap<String,Object>();

        if(ids==null||ids.length<=0)
        {
            resultMap.put("result","参数异常");
        }else
        {
            AdminUser adminUser = (AdminUser)request.getSession().getAttribute("adminUser");
            if(adminUser!=null){
                //执行删除角色
                int count = roleService.deleteRole(ids);
                if(count>0){
                    resultMap.put("result","SUCCESS");
                }else
                {
                    resultMap.put("result","操作失败");
                }

            }else
            {
                resultMap.put("result","登录超时，请重新登录");
            }
        }

        return resultMap;
    }

RoleServiceImpl部分

/**
     * 删除角色
     *
     * @param ids 角色编号数组
     * @return
     */
    @Override
    public int deleteRole(String[] ids) {

        int successCount = 0;

        //遍历角色组
        for(String roleId:ids)
        {
            //查找角色下的管理用户列表
            List<AdminUser> adminUserList =
                    adminUserService.findAdminUserListByRoleId(roleId);
            //遍历用户列表
            for (AdminUser adminUser:adminUserList)
            {
                //根据用户查询用户的角色数，一个用户可能有多个角色
                List<String> roles =
                        adminUserService.findAdminUserRoleListByAdminId(adminUser.getId());
                //如果用户的角色大于1个
                if(roles.size()>1){
                    //执行删除当前角色操作
                    //根据角色编号和用户编号，删除（用户和角色中间表）的关联信息，adminUser.id 和 roleId
                    successCount+=roleDao.deleteRoleAdminRelationByRoleIds(adminUser.getId(),roleId);
                }else
                {
                    //如果用户的角色只有一个，就更新用户的最后一个角色至未分组，adminUser.id 和roleId
                    successCount+=roleDao.updateRoleAdminRelationByRoleIds(adminUser.getId(),roleId);
                }
            }
        }

        //删除角色权限表中的角色和权限关联信息
        successCount+=roleDao.deleteRolePermissionRelationByRoleIds(ids);

        //删除角色信息
        successCount+=roleDao.deleteRoleByRoleIds(ids);


        return successCount;
    }

持久层

  <!--对应AdminUserDao接口文件中的findAdminUserRoleListByAdminId方法-->
    <select id="findAdminUserRoleListByAdminId" parameterType="int"
            resultType="string" >
        SELECT tr.roleName
        FROM t_role tr
        LEFT JOIN t_admin_role tar
        ON tar.roleId = tr.id
        LEFT JOIN t_admin ta
        ON tar.adminId = ta.id
        WHERE ta.id = #{adminId}
    </select>

 <!--对应RoleDao接口文件中的updateRoleAdminRelationByRoleIds方法-->
    <update id="updateRoleAdminRelationByRoleIds">
        UPDATE t_admin_role
        SET roleId = 2
        WHERE roleId = #{roleId} AND adminId = #{id}
    </update>



    <!--对应RoleDao接口文件中的deleteRoleAdminRelationByRoleIds方法-->
    <delete id="deleteRoleAdminRelationByRoleIds">
        DELETE FROM t_admin_role
        WHERE roleId = #{roleId} AND adminId = #{id}
    </delete>

编辑角色：

<%--
  Created by IntelliJ IDEA.
  User: shaojiang
  Date: 2019/1/27
  Time: 下午4:51
  To change this template use File | Settings | File Templates.
--%>
<%--
  Created by IntelliJ IDEA.
  User: shaojiang
  Date: 2019/1/26
  Time: 下午2:43
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!--_meta 作为公共模版分离出去-->
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="Bookmark" href="/favicon.ico" >
    <link rel="Shortcut Icon" href="/favicon.ico" />
    <!--[if lt IE 9]>
    <script type="text/javascript" src="/statics/lib/html5shiv.js"></script>
    <script type="text/javascript" src="/statics/lib/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" type="text/css" href="/statics/h-ui/css/H-ui.min.css" />
    <link rel="stylesheet" type="text/css" href="/statics/h-ui.admin/css/H-ui.admin.css" />
    <link rel="stylesheet" type="text/css" href="/statics/lib/Hui-iconfont/1.0.8/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="/statics/h-ui.admin/skin/default/skin.css" id="skin" />
    <link rel="stylesheet" type="text/css" href="/statics/h-ui.admin/css/style.css" />
    <%--zTree样式表--%>
    <link rel="stylesheet" type="text/css" href="/statics/lib/zTree/v3/css/zTreeStyle/zTreeStyle.css" />
    <!--[if IE 6]>
    <script type="text/javascript" src="/statics/lib/DD_belatedPNG_0.0.8a-min.js" ></script>
    <script>DD_belatedPNG.fix('*');</script>
    <![endif]-->
    <!--/meta 作为公共模版分离出去-->
    <title>H-ui.admin v3.1</title>
    <style>
        <%--修改ztree显示样式--%>
        ul.ztree li span.button.switch{margin-right:5px}
        ul.ztree ul ul li{display:inline-block;white-space:normal}
        ul.ztree>li>ul>li{padding:5px}
        ul.ztree>li{background: #dae6f0}
        ul.ztree>li:nth-child(even)>ul>li:nth-child(even){background: #eef5fa}
        ul.ztree>li:nth-child(even)>ul>li:nth-child(odd){background: #f6fbff}
        ul.ztree>li:nth-child(odd)>ul>li:nth-child(even){background: #eef5fa}
        ul.ztree>li:nth-child(odd)>ul>li:nth-child(odd){background: #f6fbff}
        ul.ztree>li>ul{margin-top:12px}
        ul.ztree>li{padding:15px;padding-right:25px}
        ul.ztree li{white-space:normal!important}
        ul.ztree>li>a>span{font-size:15px;font-weight:700}
    </style>
</head>
<body>
<article class="page-container">
    <form:form modelAttribute="role" action="##" onsubmit="return false" class="form form-horizontal" id="form-role-add">
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>角色名称：</label>
            <div class="formControls col-xs-8 col-sm-9">
                    <%--<input type="text" class="input-text" value="${requestScope.role.roleName}" placeholder="" id="roleName" name="roleName">--%>
                <form:hidden path="id" />
                <form:input path="roleName" cssClass="input-text"/>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">角色备注：</label>
            <div class="formControls col-xs-8 col-sm-9">
                    <%--<input type="text" class="input-text" value="${requestScope.role.remark}" placeholder="" id="" name="">--%>
                <form:input path="roleRemark" cssClass="input-text"/>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">资源权限：</label>
            <ul class=" formControls col-xs-8 col-sm-9">

                <div>
                    <ul class="ztree" id="perZtree" >
                    </ul>
                </div>
            </ul>

        </div>
        </div>
        <div class="row cl">
            <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                <button type="button" class="btn btn-success radius" id="role-save" name="admin-role-save"><i class="icon-ok"></i> 确定</button>
            </div>
        </div>
    </form:form>
</article>

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="/statics/lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="/statics/lib/plug-ins/pagination/pagination.js"></script>
<script type="text/javascript" src="/statics/lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="/statics/lib/zTree/v3/js/jquery.ztree.core-3.5.min.js"></script>
<script type="text/javascript" src="/statics/lib/zTree/v3/js/jquery.ztree.excheck-3.5.min.js"></script>
<script type="text/javascript">

    var values;

    $(function(){
        //从数据库获取所有权限数据加载到配置属性zNodes中
        loadPerData();


        $("#role-save").click(function()
        {
            var values="";
            var treeObj=$.fn.zTree.getZTreeObj("perZtree");
            var nodes=treeObj.getCheckedNodes(true);
            for(var i=0;i<nodes.length;i++){
                values+=nodes[i].id + ",";
            }

            values=values.substr(0,values.length-1);

            var roleId = $("#id").val();
            var roleName = $("#roleName").val();
            var roleRemark = $("#roleRemark").val();
            if(!roleId){
                layer.msg("缺少角色主键");
                return false;
            }
            if(!roleName){
                layer.msg("请输入角色名称");
                $("#roleName").select();
                return false;
            }else if(roleName.length>12)
            {
                layer.msg("不能超过12个字符");
                $("#roleName").select();
                return false;
            }else if(!roleRemark){
                layer.msg("请输入角色备注");
                $("#roleRemark").select();
                return false;
            }else if(roleRemark.length>12)
            {
                layer.msg("不能超过30个字符");
                $("#roleRemark").select();
                return false;
            }else if(values.length<=0)
            {
                layer.msg("请给角色至少分配一个权限");
                return false;
            }else
            {

                var formStr = "roleId="+roleId+"&";
                formStr += "roleName="+roleName+"&";
                formStr += "roleRemark="+roleRemark+"&";
                formStr += "pers="+values;
                //提交表单
                // var yesForm = $("#form-role-add").serialize();
                alert(formStr);

                parent.layer.confirm('确定提交保存？',function(index) {

                    $.ajax({
                        //几个参数需要注意一下
                        type: "POST",//方法类型
                        dataType: "json",//预期服务器返回的数据类型
                        url: "/admin/role/zTree-role-edit.action" ,//url
                        data:formStr,
                        success: function (data) {
                            console.log(data.result);//打印服务端返回的数据(调试用)
                            if (data.result == 'SUCCESS'||data.result == 200) {
                                parent.layer.close(index);//关闭弹窗
                                layer.msg("保存成功",{icon:1,time:2000});
                            }else
                            {
                                layer.msg("保存失败:"+data.result.toString(),{icon:5,time:2000});
                            }
                        },
                        error : function() {
                            layer.msg(data.result.toString());
                        }
                    });
                });

            }

        });
    });



    function loadPerData() {

        var roleId = $("#id").val();
        //alert(roleId);
        var treeNodes;
        if(roleId){
            //请求获取角色下的权限列表
            $.ajax({
                async:false,//是否异步
                cache:false,//是否使用缓存
                type:'POST',//请求方式：post
                dataType:'json',//数据传输格式：json
                url:'/admin/role/loadRolePermissionZTree.action/'+roleId.toString(),//请求的action路径
                error:function(){
                    //请求失败处理函数
                    layer.msg("请求角色权限失败",{icon:5,time:3000});
                },
                success:function(data){
                    //console.log(data);
                    //alert(data.toString());
                    //请求成功后处理函数
                    treeNodes = data;//把后台封装好的简单Json格式赋给treeNodes
                }
            });
        }


        //alert(treeNodes.toString());


//        var treeNodes = [
//            {"id":1, "pId":0, "name":"test1"},
//            {"id":11, "pId":1, "name":"test11"},
//            {"id":12, "pId":1, "name":"test12"},
//            {"id":111, "pId":11, "name":"test111"}
//        ];

        var setting = {
            view: {
                dblClickExpand: false,//双击节点时，是否自动展开父节点的标识
                showLine: true,//是否显示节点之间的连线
                fontCss:{'color':'black','font-weight':'bold'},//字体样式函数
                selectedMulti: false //设置是否允许同时选中多个节点
            },
            check:{
                //chkboxType: { "Y": "ps", "N": "ps" },
                chkStyle: "checkbox",//复选框类型
                enable: true //每个节点上是否显示 CheckBox
            },
            data: {
                key:{
                    url:"xUrl"//后台数据使用了url,如果不想点击节点后跳转，设置不存在的URL即可
                },
                simpleData: {//简单数据模式
                    enable:true,
                    idKey: "id",
                    pIdKey: "parentId",
                    rootPId: ""
                }
            }
        };


        $.ajax({
            async:false,//是否异步
            cache:false,//是否使用缓存
            type:'POST',//请求方式：post
            dataType:'json',//数据传输格式：json
            url:'/admin/per/loadPermissionZTree.action',//请求的action路径
            error:function(){
                //请求失败处理函数
                layer.msg("请求失败",{icon:5,time:3000});
            },
            success:function(data){
                //console.log(data);
                //alert(data.toString());
                //请求成功后处理函数
                //初始化zTree,展开所有节点
                $.fn.zTree.init($("#perZtree"), setting, data).expandAll(true);
            }
        });


        //获取ztree对象
        var treeObj=$.fn.zTree.getZTreeObj("perZtree");
        //alert(treeNodes.toString());
        //遍历需要选中的角色节点,然后利用该节点ID获得与他相同的tree中的节点，设置为选中
        if(treeNodes!=null&&treeNodes.length>0){
            for(var i = 0;i<treeNodes.length;i++){
                var nodes = treeObj.getNodesByParam("id",treeNodes[i].id.toString(),null);
                //勾选当前选中的节点
                treeObj.checkNode(nodes[0], true, false);
            }
        }


    }

</script>
<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>

/**
     * ztree样式编辑角色信息
     * @param request
     * @param model
     * @return
     */
    @AccessPermissionsInfo("role:edit")
    @RequestMapping(value = "/zTree-role-edit.action",method = RequestMethod.POST)
    @ResponseBody
    public Map<String,Object> zTreeEditRole(HttpServletRequest request,Model model){

        Map<String,Object> resultMap = new HashMap<String ,Object>();

        String ids = request.getParameter("pers");
        //转换成数组
        String[] pers = ids.split(",");

        if(request.getParameter("roleId")==null||
                request.getParameter("roleName")==null||
                request.getParameter("roleRemark")==null){
            resultMap.put("result","参数不合法");
        }else if(pers==null ||pers.length<=0){
            resultMap.put("result","请给角色至少分配一个权限");
        }else
        {
            String roleId = request.getParameter("roleId").toString();
            String roleName = request.getParameter("roleName").toString();
            String roleRemark = request.getParameter("roleRemark").toString();
            Role role = new Role();
            role.setId(Integer.parseInt(roleId));
            role.setRoleName(roleName);
            role.setRoleRemark(roleRemark);
            //验证Session是否过期，其实不验证也可以，拦截器中已经进行了拦截
            AdminUser adminUser = (AdminUser)request.getSession().getAttribute("adminUser");
            if(adminUser!=null){
                //查询角色是否存在
                Role role2 = roleService.findRoleByRoleName(roleName);
                if(role2!=null){
                    //编辑角色信息
                    int count = roleService.editRole(role,pers);
                    if(count>0){
                        resultMap.put("result","SUCCESS");
                    }else
                    {
                        resultMap.put("result","操作失败");
                    }
                }else
                {
                    resultMap.put("result","角色不存在");
                }

            }else
            {
                resultMap.put("result","登录超时，请重新登录");
            }

        }

        return resultMap;
    }

RoleServiceImpl部分

 /**
     * 编辑角色信息
     *
     * @param role 角色信息
     * @param pers 权限编号数组
     * @return
     */
    @Override
    public int editRole(Role role, String[] pers) {

        int successCount = 0;
        //第一步：更新角色
        successCount+=roleDao.editRole(role);

        //第二步:根据角色编号查询角色已经持有的权限集合
        List<Permission> permissions =
                roleDao.getRolePermissions(role.getId());
        //取出权限ID放入字符串集合中
        List<String> oldPers = new ArrayList<String>();
        for(Permission p:permissions)
        {
            oldPers.add(p.getId().toString());
        }

        //第三步:遍历旧的权限组
        for (String pId:oldPers)
        {
            //将数组装换成集合
            //如果新的权限组中未包含旧的权限ID
            if(!Arrays.asList(pers).contains(pId)){
                //执行删除角色权限的关联，参数1：角色ID，参数2：旧权限ID
                successCount+=roleDao.deleteRolePermissionRelationById(role.getId(),pId);
            }
        }

        //第四步:遍历新的权限组
        for(String pId:pers)
        {   //如果旧的权限中未包含新的权限ID
            if(!oldPers.contains(pId)){
                //执行插入角色权限操作，参数1：角色ID，参数2：新权限ID
                successCount+=roleDao.addRolePermissionRelation(role.getId().toString(),pId);
            }
        }

        return successCount;
    }

RoleMapper.xml 持久层：

    <!--对应RoleDao接口文件中的editRole方法,参数类型role-->
    <update id="editRole">
        <!--注意这里使用了动态sql-->
        UPDATE t_role
        <set>
            <if test="roleName != null">
                roleName = #{roleName,jdbcType=VARCHAR},
            </if>
            <if test="roleRemark != null">
                roleRemark = #{roleRemark,jdbcType=VARCHAR}
            </if>
        </set>
        WHERE id = #{id}
    </update>

 <!--对应RoleDao接口文件中的getRolePermissions方法,参数：int 角色编号-->
    <select id="getRolePermissions" parameterType="int" resultType="com.supin51.domain.Permission" >
        SELECT tp.*
        FROM t_permission tp
        LEFT JOIN t_role_permission trp
              ON  trp.permissionId = tp.id
        LEFT JOIN t_role tr
              ON  trp.roleId = tr.id
        WHERE tr.id = #{roleId}
    </select>

    <!--对应RoleDao接口文件中的deleteRolePermissionRelationById方法-->
    <delete id="deleteRolePermissionRelationById">
        DELETE FROM t_role_permission
        WHERE roleId = #{roleId} AND permissionId = #{pId}
    </delete>



    <!--对应RoleDao接口文件中的deleteRolePermissionRelationByRoleIds方法-->
    <delete id="deleteRolePermissionRelationByRoleIds">
        DELETE FROM t_role_permission
        WHERE roleId in
        <foreach item="item" index="index" collection="array"
                 open="(" separator="," close=")" >
            #{item}
        </foreach>
    </delete>