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');
}
复制代码

转载于:https://juejin.im/post/5cea523d518825332a1ef6af