EasyUI之Tree樹形結構(三)

咱們在作相似於角色管理的功能時，須要根據角色查詢出具體綁定的權限信息，而後選中tree樹形節點，效果以下：

前端html代碼：

<div id="win" class="easyui-window" title="權限編輯" style="width: 488px; height: 400px;" closed="true">
    <form style="padding: auto">
       //先加載出tree樹形結果，參考上篇文章 https://juejin.im/post/5cea4ddf6fb9a07ecc446196
       <ul id="tt" class="easyui-tree" url="/sys/menu/tree" method="post" checkbox="true"></ul>
         <div style="padding: 5px; text-align: center;">
           <a href="#" class="easyui-linkbutton" icon="icon-ok" onclick="SysResource.list.confirmEdit();">肯定</a>
           <a href="#" class="easyui-linkbutton" icon="icon-cancel" onclick="SysResource.list.closeWin();">取消</a>
         </div>
    </form>
</div>
複製代碼

js代碼：

confirmEdit:function () {
    var funIds = SysResource.list.getChecked();
    var data = {
        "roleId" :editRowId,
        "menuIdList":funIds
    };
    $.ajax({
        type : "POST",
        url : SysResource.URL.saveAuthority(),
        data: data,
        traditional: true,
        success : function(data) {
            if (data.msg == "success") {
                //居中顯示，延時500ms消失
                $.messager.show({ msg : "操做成功",title : '成功',showType: 'fade',timeout: 500,style: {
                }});
                SysResource.list.closeWin();
            }else{
                $.messager.alert('錯誤',"操做失敗",'error');
            }
        }
    });
},
editRole:function (roleId) {
    editRowId=roleId;
    //1.取消全部選擇
    var root = $('#tt').tree('getRoots');
    $(root).each(function(i,obj){
        $("#tt").tree('uncheck',obj.target);
        $("#tt").tree('collapseAll',obj.target);
    });
    //2.加載權限，動態選擇
    var url = SysResource.URL.get(roleId);
    $.ajax({
        cache : true,
        type : "GET",
        url : url,
        async : false,
        success : function(result) {
            if(result.data.menuIdList == undefined || result.data.menuIdList==null || result.data.menuIdList.length == 0){
                return;
            }
            $(result.data.menuIdList).each(function(i,obj){
                var node = $("#tt").tree('find',obj);
                if(node !=null && node != undefined && Number(node.pid)!=0){
                    //父節點不是0，表明不是一級菜單
                    if(node.children != null && node.children.length !=0){
                        //菜單下還有按鈕
                        if(Number(node.isLeaf)==2){
                            $('#tt').tree('check', node.target);
                        }
                    }else{
                        $('#tt').tree('check', node.target);
                    }
                }
            });
        }
    });
    $("#win").window('open');
}
複製代碼