基于SSM的RBAC权限系统(1)-利用ajax，bootstrap，ztree完成权限树功能

基于SSM的RBAC权限系统(1)-利用ajax，bookstrap，ztree完成权限树功能

仅支持回显以及选择，不支持在树中的编辑

效果图如下

搭建后台回显以及修改的模块

JSON数据封装

public class Msg {
    private int code;
    private String msg;
    private Map<String,Object> extend=new HashMap<String,Object>();
    //还有一些getset方法没显示出来
    public static Msg success(){
        Msg result = new Msg();
        result.setCode(100);
        result.setMsg("处理成功");
        return result;
    }

    public static Msg fail(){
        Msg result = new Msg();
        result.setCode(200);
        result.setMsg("处理失败");
        return result;
    }

    public static Msg noPermission(){
        Msg result = new Msg();
        result.setCode(250);
        result.setMsg("没有权限");
        return result;
    }

    public static Msg reject(){
        Msg result = new Msg();
        result.setCode(300);
        result.setMsg("拒绝请求");
        return result;
    }

}

Controller中的代码,RequiredPermission为自定义注解

   @ResponseBody
    @RequiredPermission("树形分配:获得回显信息")
    @RequestMapping("role/treePermission_echo")
    public Msg treePermission_echo(@RequestParam("ID")Long ID) throws Exception{
        //这里判断有无权限，具体原因请看其他文章
        Throwable t = new Throwable();
        boolean isHasPermission=PermissionUtil.hasPermission(this.getClass(),t.getStackTrace()[0].getMethodName());
        if(!isHasPermission)
            return Msg.noPermission().add("returnMsg","您没有权限【树形分配:获得回显信息】");
        //从下一层获取ztree权限树数据
        List<ZtreePermission> allZtreeMsg =
                permissionService.getAllZtreeMsg(ID);
        System.out.println();
        return Msg.success().add("allZtreeMsg",allZtreeMsg);
    }

    @ResponseBody
    @RequiredPermission("树形分配:修改")
    @RequestMapping("role/treePermission_alter")
    public Msg treePermission_alter(@RequestParam("permissionListTree")List<String> permissionListTree
    ) throws Exception {
        Throwable t = new Throwable();
        boolean isHasPermission=PermissionUtil.hasPermission(this.getClass(),t.getStackTrace()[0].getMethodName());
        if(!isHasPermission)
            return Msg.noPermission().add("returnMsg","您没有权限【树形分配:修改】");
        ArrayList<Long> permissionListID = new ArrayList<>();
        Long ID=Long.valueOf(permissionListTree.get(0));
        //判断是权限组还是权限，是权限则加入
        for(String  permissionID:permissionListTree){
            if(permissionID.charAt(0)=='p'){
                permissionListID.add(Long.valueOf(permissionID.substring(2,permissionID.length())));
            }
        }
        //这里其实可以优化，我暂时采用了删除所有再更新的方法
        roleToPermissionService.deleteById(ID);
        for(Long id:permissionListID){
            RoleToPermission roleToPermission=new RoleToPermission();
            Role role = new Role();
            role.setId(ID);
            Permission permission=new Permission();
            permission.setId(id);
            roleToPermission.setRole(role);
            roleToPermission.setPermission(permission);
            roleToPermissionService.addItem(roleToPermission);
        }
        return Msg.success();
    }

ztree树的构建

因为我需要的功能复杂度不高，所以ztree设定很简单

   var setting = {
            check: {
                enable: true
            },
            data: {
                simpleData: {
                    enable: true
                }
            }
        };
        var zNodes ;
               function setCheck() {
            var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
                type = { "Y" : "ps", "N" : "ps" };
            zTree.setting.check.chkboxType =  type;
        }
                    $(".treeBtn").each(function () {
                $(this).click(function () {
                    ID = $(this).attr("name");
                    $.ajax({
                        url: "role/treePermission_echo",
                        //ID为你本次选择需要为哪个角色分配权限的角色ID
                        data: "ID=" + ID,
                        type: "POST",
                        success: function (result) {
                            if (result.code == 100) {
                                zNodes=result.extend.allZtreeMsg;
                                $.fn.zTree.init($("#treeDemo"), setting, zNodes);
                                setCheck();
                            } else if(result.code==250){
                         //弹出权限不足的窗口
                                $("#btn_closeTree").click();
                        show_errorWindows(result.extend.returnMsg);
                            }
                        }
                    });
                });
            });

看看最简单的checkbox权限树结构

ztree非常方便，甚至不用我们自己写算法递归出树，因此只要将结构封装成一样的json丢给zNodes就可以了！

ztree对应的实体类

public class ZtreePermission {
    String id;
    String pId;
    String name;
    Boolean checked;
    Boolean open;

    public ZtreePermission(){

    }

    public ZtreePermission(Permission permission){
        this.id="p."+permission.getId();
        this.pId="g."+permission.getParentID();
        this.name=permission.getName();
        this.open=false;
        this.checked=false;
    }

    public ZtreePermission(Permission_Groud permission_groud){
        this.id="g."+permission_groud.getId();
        this.pId="g."+permission_groud.getParentID();
        this.name=permission_groud.getName();
        this.checked=null;
        this.open=true;
    }
}

值得注意的是如果你有两张表而且id重复的话，可以这样 id=”student.1” pid=”teacher.2”

回显部分代码

这里只获取了ID，如果需要其他数据可以查看API文档

 $("#btn_inputTree").click(function () {
                var zTree = $.fn.zTree.getZTreeObj("treeDemo");
                var nodes=zTree.getCheckedNodes(true);
                permissionListTree = new Array();
                //这里我把ID丟进了ID第一位，后台要注意！！
                permissionListTree.push(ID);
                for ( var j = 0; j < nodes.length; j++) {
                    permissionListTree.push(nodes[j].id);
                }
                $.ajax({
                    url: "role/treePermission_alter",
                    data: "permissionListTree="+permissionListTree,
                    type: "POST",
                    success: function (result) {
                        if(result.code ==100){
                            $("#btn_closeTree").click();
                        }else if(result.code==250){
                            $("#btn_closeTree").click();
                           //权限不足，显示窗口 show_errorWindows(result.extend.returnMsg);
                        }

                    }
                });


            });

最后来看看最简单窗口代码

    <div class="modal fade" id="dtreeModal" tabindex="-1" role="dialog" aria-labelledby="preModalLabel">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <form role="form" action="" method="post">
                            <div class="modal-header">
                                <button data-dismiss="modal" class="close" type="button"><span
                                        aria-hidden="true">×</span><span
                                        class="sr-only">Close</span></button>
                                <h4 class="modal-title">树形分配</h4>
                            </div>
                            <div class="modal-body" >
                                <div>
                                    <ul id="treeDemo" class="ztree"></ul>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button  id="btn_closeTree" data-dismiss="modal" class="btn btn-default" type="button">
                                    关闭
                                </button>
                                <button  id="btn_inputTree" class="btn btn-primary" type="button">提交</button>
                            </div>
                        </form>
                    </div><!-- /.modal-content -->
                </div><!-- /.modal-dialog -->
            </div>

完整项目地址

这是我第一个写的web项目，代码烂得飞起，仅供纪念，不做参考
带Shiro版：https://github.com/EnTaroAdunZ/ssm_rbac_shiro.git
不带Shiro版：https://github.com/EnTaroAdunZ/ssm_rbac.git