使用zTree作为权限树，并进行权限的添加和删除

zTree具体api参看官方文档：http://www.treejs.cn/v3/api.php

功能描述

属于用户管理模块，其他类似。

每个用户展示的权限树是一样的，不一样的是各个用户拥有的权限前会打勾。

点击树的勾选框选择是添加还是删除权限。

用户拥有的角色的权限是不可编辑的，树节点显示为不可编辑状态（无法勾选）。

 

一、获取数据并展示某个用户的权限树

1、zNodes = result.list;

list中的对象属性为appName、appId、parappId（对应setting设置）、userStatus、roleStatus

2、userStatus、roleStatus

为true表示：

userStatus：此用户拥有此权限

roleStatus：此用户拥有的角色，拥有此权限

//初始化树节点
function getTreeNode(loginId) {
    var data = {"loginId":loginId};
    //树的数据对象集
    var zNodes = null;
    $.ajax({
        url: ...,
        contentType: "application/json",
        type: "post",
        dataType:'json',
        async: false,
        data: JSON.stringify(data) ,
        success: function (result) {
            // list是后端已经格式好的数据列表
            zNodes = result.list;
        }
    });

    //ztree 树节点定义
    var setting = {
        check: {
            enable: true,
            chkStyle: "checkbox",
            chkboxType: { "Y": "ps", "N": "s" }
        },
        data: {
            key: {
                name: "appName"
            },
            simpleData: {
                enable: true,
                idKey: "appId",
                pIdKey: "parappId",
            }
        }
    };
    //初始化菜单权限，如果不是同步，这里的zNodes为null
    $.fn.zTree.init($("#treeDemo"), setting, zNodes);
    //根据 treeId 获取 zTree 对象
    var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
    //userStatus是树节点对象的属性，是后端list对象中的属性
    var userNodes = treeObj.getNodesByParam("userStatus",true);
    var roleNodes = treeObj.getNodesByParam("roleStatus",true);

    for(var i=0;i<userNodes.length;i++) {
        var obj = userNodes[i];
        //设置选中的节点
        treeObj.checkNode(obj, true, false);
        //展开选中的节点
        treeObj.selectNode(obj);
    };
    for(var i=0;i<roleNodes.length;i++) {
        var obj = roleNodes[i];
        //设置选中的节点
        treeObj.checkNode(obj, true, false);
        //展开选中的节点
        treeObj.selectNode(obj);
        //设置不可编辑的节点，后面两个false表示禁用的子节点和父节点互不影响
        treeObj.setChkDisabled(obj,true,false ,false);
    };
}

 

 二、添加或删除某个用户的权限

 

//提交选中节点
function saveTreeNode(loginId) {
    var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
    var checkedObjs = treeObj.getCheckedNodes(true);  //获取所有选中的节点
    var unCheckedObjs = treeObj.getCheckedNodes(false);  //获取所有未选中的节点

    var addObj = new Array();　//创建一个增加数组
    for(var i=0;i<checkedObjs.length;i++) {
        var obj = checkedObjs[i];
        if(!obj.userStatus){
            addObj.push(obj.popedomCode);
        }
    };

    var deleteObj = new Array();　//创建一个减少数组
    for(var i=0;i<unCheckedObjs.length;i++) {
        var obj = unCheckedObjs[i];
        if(obj.userStatus){
            deleteObj.push(obj.popedomCode);
        }
    };

    var savaData = {
        "popedomCodes" : addObj,
        "loginId" : loginId
    };
    $.ajax({
        url: loginpopedomrel_save,
        contentType: "application/json",
        type: "POST",
        dataType:'json',
        data: JSON.stringify(savaData) ,
        beforeSend: ...,
        async:false,
        success: function (res) {
            
        }
    });

    var deleteData = {
        "popedomCodes" : deleteObj,
        "loginId" : loginId
    };
    $.ajax({
        url: loginpopedomrel_delete,
        contentType: "application/json",
        type: "post",
        dataType:'json',
        data: JSON.stringify(deleteData) ,
        beforeSend: ...,
        async:false,
        success: function (res) {

        }
    })
    alert("success");
    window.location.reload();

}

总结

zTree具体api参看官方文档，非常详细：http://www.treejs.cn/v3/api.php