zTree實現樹菜單角色權限分配

//打開授權模態框
function givePower(id) {
    //通過uniqueId 獲取行數據
    var rows = $('#parameterTab').bootstrapTable('getRowByUniqueId', id);
    $("#roleNameTree").val(rows.roleName);
    //展示角色模態框
    $('#sysRoleTreeModal').modal('show');//settingss
    // ajax獲取后台數據
    $.ajax({
        url: '/internal/resource/tree/list',
        async: true,
        dataType: 'json',
        success: function (result) {
            zNodes = result;
            // 生成樹結構
            treeList(zNodes);
        },
        error: function () {
            toastr.error("查詢角色樹節點失敗");
        }
    });

    //創建樹
    function treeList(roleResourceList) {
        var setting = {
            check: {
                enable: true,//復選框
                chkDisabledInherit: true,
                checkboxType: {"Y": "p", "N": "s"} //控制父選框和子選框的同步
            },
            view: {
                selectedMulti: false
            },
            data: {
                key: {
                    name: "name", //節點顯示的值
                },
                simpleData: {
                    enable: true,//如果為true,可以直接把從數據庫中得到的List集合自動轉換為Array格式。而不必轉換為json傳遞
                    idKey: "id",//節點的id
                    pIdKey: "parentId",//節點的父節點id
                    rootPId: ""
                }
            }
        };
        var treeNodes = roleResourceList;
        // 初始化樹 //參數1：容器對象  2：tree的setting設置  3：接收后台返回值的數組
        $.fn.zTree.init($("#busTree"), setting, treeNodes);
        //動態加載zTree的選中值
        $.ajax({
            type: "post",
            url: '/internal/roleResource/load',
            data: {"id": id},
            dataType: 'json',
            success: function (result) {
                if (result) {
                    var treeObj = $.fn.zTree.getZTreeObj("busTree");//獲取Tree對象
                    for (var i = 0; i < result.length; i++) {
                        var value = result[i].resourceId;
                        var node = treeObj.getNodeByParam("id", value);//根據ID找到該節點
                        treeObj.checkNode(node);//根據該節點選中
                    }
                }
            }
        });
    }

    //調用方法  獲取roleId
    doSaveRole(id);
}

//授權操作
function doSaveRole(id) {
    $("#roleId").val(id);
}

//授權    模態框的事件
    $("#submitTree").click(function () {
        var resourceIds = onCheck();
        $.ajax({
            type: "post",
            url: '/internal/roleResource/add',
            data: {"roleId": $("#roleId").val(), "resourceIds": resourceIds},
            dataType: 'json',
            success: function (result) {
                if (result.success) {
                    toastr.success(result.module);
                    $('#sysRoleTreeModal').modal('hide');
                    $("#parameterTab").bootstrapTable("refresh");
                } else {
                    toastr.error("授權失敗");
                }
            }
        });
    });

 

//獲取被選中的id 值
function onCheck() {
    //樹
    var treeObj = $.fn.zTree.getZTreeObj("busTree");
    //選中的框的樹的節點
    var nodes = treeObj.getCheckedNodes(true);
    var v = "";
    for (var i = 0; i < nodes.length; i++) {
        v += nodes[i].id + ",";
    }
    return v;
}

<!--授權模態框-->
<div class="modal fade" id="sysRoleTreeModal" tabindex="-1" role="dialog" aria-labelledby="myItemModalLabel">
    <div class="modal-dialog" >
        <div class="modal-content">
            <!-- 頭部 標題 -->
            <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>
            <!--body  組成-->
            <div class="modal-body">
                <!-- 表單-->
                <form id="sysRoleTreeForm">
                    <div class="input-group">
                        <!--編號id-->
                        <input type="hidden" name="id" id="roleId"/>
                    </div>
                    <div class="input-group">
                        <span class="input-group-addon" >角色名：</span>
                        <input type="text" readonly="readonly" class="form-control" name="roleName" id="roleNameTree" />
                    </div>
                    <br/>
                    <!--樹權限-->
                    <div class="treecontentpane">
                        <ul id="busTree" class="ztree" >
                        </ul>
                    </div>
                </form>
            </div>
            <!--尾部-->
            <div class="modal-footer">
                <button id="submitTree" type="button" class="btn btn-primary">保存</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
            </div>
        </div>
    </div>
</div>

 

//效果圖