zTree实现权限分配

首先展示一下效果图：

在这里会显示所有的权限，并绑定这个角色的权限.

整体思路：

        权限显示： 首先获取从权限表中获取所有权限建树，然后从权限角色中间表中获取角色对应的权限（将对应的id存在一个数组,传到前台），然后绑定到ztree树上。

        权限修改：在权限修改时，首先将角色对应的权限删除（即角色权限中的数据删除），之后获取页面选中的权限，添加到角色权限表中

1.首先，展示一下用到的数据库表

1.1角色表

1.2权限表

1.3权限角色中间表

 

2.然后，导入需要用的js和css等，可去我的资源中直接下载（需要积分，因无法修改下载积分，建议直接去官网下载）

3.前端界面（此项目使用springboot，一些前端语法是theamleaf的）

<div class="content_wrap" style="margin-left: 150px">
    //角色id，用于修改对应角色的权限
    <input  type="text" name="rid" id="rid" required  lay-verify="required"  th:value="${rid}" autocomplete="off" style="width: 240px" class="layui-input" th:type="hidden">

    //用于权限展示
    <div class="zTreeDemoBackground left" >
        <ul id="treeDemo" class="ztree"></ul>
        <a class="layui-btn layui-btn-normal" th:onclick="setPrivilege()">提交</a>
    </div>
</div>

4.js文件

var setting = {
                check: {
                    enable: true
                },
                data: {
                    simpleData: {
                        enable: true
                    }
                }
            };

           //查找所有权限，然后建树
            var zNodes;
            $.ajax({
                type: "post",
                url: "findAll.do",
                dataType: "json",
                success: function (data) {
                    zNodes = data.info;
                    $.fn.zTree.init($("#treeDemo"), setting, zNodes);
                    //获取已有权限，绑定到树上
                    getChecked()
                }
            })

            var code;

           
            function setCheck() {
                var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
                    py = $("#py").attr("checked") ? "p" : "",
                    sy = $("#sy").attr("checked") ? "s" : "",
                    pn = $("#pn").attr("checked") ? "p" : "",
                    sn = $("#sn").attr("checked") ? "s" : "",
                    type = {"Y": py + sy, "N": pn + sn};
                    zTree.setting.check.chkboxType = type;
                    showCode('setting.check.chkboxType = { "Y" : "' + type.Y + '", "N" : "' + type.N + '" };');
            }

            function showCode(str) {
                if (!code) code = $("#code");
                code.empty();
                code.append("<li>" + str + "</li>");
            }


            $(document).ready(function () {
                setCheck();
                $("#py").bind("change", setCheck);
                $("#sy").bind("change", setCheck);
                $("#pn").bind("change", setCheck);
                $("#sn").bind("change", setCheck);
            });

            //从后台获取本角色有的权限
            function getChecked() {
                rid = document.getElementById("rid").value;
                $.ajax({
                    type: "post",
                    url: "getChecked.do",
                    data: {"rid": rid},
                    dataType: "json",
                    success: function (data) {
                        result = data.info;
                        for (var i = 0; i < result.length; i++) {
                            zTree = $.fn.zTree.getZTreeObj("treeDemo"); //
                            zTree.checkNode(zTree.getNodeByParam("id", result[i]), true); //根据id在ztree的复选框中实现自动勾选
                        }
                    }
                })
            }

        })

       //修改权限，可以实现权限的增加或者删除，勾选即添加，取消勾选即删除
        function setPrivilege() {
            var tt = $.fn.zTree.getZTreeObj("treeDemo");
            if (tt != null) {
                var nodes = tt.getCheckedNodes(true);
                var str = '';
                //要对数据进行处理
                $(nodes).each(function () {
                    str += this.id + ",";
                });

                $.ajax({
                    type: "post",
                    url: "updatePrivilege.do?rid=" + rid,
                    data: {"str": str},
                    dataType: "json",
                    success: function (data) {
                        if (data.code == 0) {
                            layer.alert('修改成功')

                        }
                    }

                })
            }

5.Controller层

@Controller
@RequestMapping("/jurisdiction")
public class JurisdictionManageController {
    @Autowired
    private JurisdictionManageService jurisdictionManageService;

    @RequestMapping("/page.do")
    public String page(HttpServletResponse response){
        return "after/jurisdictionManage";
    }

    @RequestMapping("/jumpModify.do")
    public String JumpModifyJurisdiction(Integer rid, Model model){
        model.addAttribute("rid",rid);
        return "after/jurisdictionManage-modify";
    }

    @ResponseBody
    @RequestMapping("/findAll.do")
    public JsonResult findAllPermission(){
        List<Permission> all = jurisdictionManageService.findAll();
        return new JsonResult(0,all);
    }

    @ResponseBody
    @RequestMapping("/findAllRole.do")
    public Map<String, Object> findAllRole(){
        List<Role> allRole = jurisdictionManageService.findAllRole();
        HashMap<String, Object> map = new HashMap<>();
        map.put("code",0);
        map.put("data",allRole);
        return map;
    }

    @ResponseBody
    @RequestMapping("/getChecked.do")
    public JsonResult getChecked(Integer rid){
        Integer[] checked = jurisdictionManageService.getChecked(rid);
        return new JsonResult(0,checked);
    }

    @ResponseBody
    @RequestMapping("/updatePrivilege.do")
    public JsonResult updatePrivilege(Integer rid,String str){
        String[] arr =  str.split(",");
        jurisdictionManageService.updatePrivilege(rid, arr);
        return new JsonResult(0,null);
    }


}

6.Service层（这里直接展示serviceImpl）

@Service
public class JurisdictionManageServiceImpl implements JurisdictionManageService {
    @Autowired(required = false)
    private JurisdictionManageDao jurisdictionManageDao;
    @Override
    public List<Permission> findAll() {
        return jurisdictionManageDao.findAll();
    }

    public List<Role> findAllRole(){
        return jurisdictionManageDao.findAllRole();
    }

    @Override
    public Integer[] getChecked(Integer rid) {
        return jurisdictionManageDao.getChecked(rid);
    }

    //这里在更新权限时，首先将这个角色的权限全部删除，然后再插入页面中所有已经选中的权限
    @Override
    public void updatePrivilege(Integer rid, String[] privilegeArray) {
        if (jurisdictionManageDao.getChecked(rid)!= null ){
            jurisdictionManageDao.deletePrivilege(rid);
        }
        jurisdictionManageDao.updatePrivilege(rid, privilegeArray);
    }
}

7.dao层

public interface JurisdictionManageDao {
    public List<Permission> findAll();

    public List<Role> findAllRole();

    public Integer[] getChecked(Integer rid);

    public void updatePrivilege(@Param("rid") Integer rid,@Param("privilegeArray")String[] privilegeArray);

    public void deletePrivilege(Integer rid);
}

8.mapper

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="com.qfedu.dt.dao.JurisdictionManageDao">
    <resultMap id="permissionMap" type="com.qfedu.dt.entity.Permission">
        <id property="id" column="pid"></id>
        <result property="pId" column="parent_id"></result>
        <result property="name" column="resource_name"></result>
        <result property="permission_name" column="permission_name"></result>
        <result property="url" column="url"></result>
        <result property="resource_type" column="resource_type"></result>
    </resultMap>

    <select id="findAll" resultMap="permissionMap">
        select pid,parent_id ,resource_name
        from permision
    </select>

    <select id="findAllRole" resultType="role">
        select distinct role.rid ,rolename from role,role_permision
        where role.rid = role_permision.rid
    </select>

    <select id="getChecked" parameterType="int" resultType="int">
        select DISTINCT permision.pid
        from permision,role_permision
        where permision.pid = role_permision.pid and rid = #{rid}
    </select>

    <delete id="deletePrivilege" parameterType="int">
        delete from role_permision where rid = #{rid}
    </delete>
    
    <insert id="updatePrivilege" >
        insert into role_permision(rid,pid) values
          <foreach collection="privilegeArray" item="pid" separator=",">
              (#{rid},${pid})
          </foreach>
    </insert>
</mapper>

9.一些用到的自定义的类

9.1权限实体

public class Permission {
    private Integer id;
    private String name;
    private Integer pId;
    private String permission_name;
    private String resource_type;
    private String url;
}

9.2角色实体

public class Role {
    private Integer rid;
    private String rolename;
}

9.3JsonResult

public class JsonResult {
    private int code;
    private Object info;

    public JsonResult() {
    }

    public JsonResult(int code, Object info) {
        this.code = code;
        this.info = info;
    }

    public int getCode() {
        return code;
    }

    public void setCode(int code) {
        this.code = code;
    }

    public Object getInfo() {
        return info;
    }

    public void setInfo(Object info) {
        this.info = info;
    }
}