Easy-UI 的树形插件实现权限选中效果

      最近需要一个实现一个权限设置，如果通过手工的设置一个一个输入的话，弄不好要疯掉，所以就来一个程序图形化的展示数据然后选中。
      至于树形结构的话选择有很多，本着以前使用过Easy-UI的情况下，就决定用Easy-UI 的树形结构实现了

      话不多说，先看效果：

这是选中部分子节点的：

这是选中全部子节点的：

可以看到我们的权限直接变为父节点的，这样符合父权限包含所有子权限的规则，个人使用的Shiro，设计初衷也是如此。更多的效果图就不放出来了，有兴趣的可以自己试一下。

      接下来就是实现的过程了。
      ① 数据准备：作为一个简单的demo，肯定不用数据库了，这样方便练习。就用json即可，记得把下面的数据存储为一个json文件，然后url请求它

Permissions：所有的权限数据

[
    {
        "children": [],//字权限集合
        "id": "1",//权限id
        "permission": "common:*",//权限描述符
        "pid": "0",//父分类id  0为定级id
        "text": "控制台"//权限名字
    },
    {
        "children": [
            {
                "children": [
                    {
                        "children": [
                            {
                                "children": [],
                                "id": "5",
                                "permission": "bussiness:roadsort:add",
                                "pid": "4",
                                "text": "添加线路类别"
                            },
                            {
                                "children": [],
                                "id": "6",
                                "permission": "bussiness:roadsort:update",
                                "pid": "4",
                                "text": "修改线路类别"
                            },
                            {
                                "children": [],
                                "id": "7",
                                "permission": "bussiness:roadsort:delete",
                                "pid": "4",
                                "text": "删除线路类别"
                            },
                            {
                                "children": [],
                                "id": "8",
                                "permission": "bussiness:roadsort:log",
                                "pid": "4",
                                "text": "线路类别操作日志"
                            },
                            {
                                "children": [],
                                "id": "9",
                                "permission": "bussiness:roadsort:collection",
                                "pid": "4",
                                "text": "批量操作线路类别"
                            }
                        ],
                        "id": "4",
                        "permission": "bussiness:roadsort:*",
                        "pid": "3",
                        "text": "线路类别"
                    },
                    {
                        "children": [
                            {
                                "children": [],
                                "id": "11",
                                "permission": "bussiness:stroke:add",
                                "pid": "10",
                                "text": "添加行程模板"
                            },
                            {
                                "children": [],
                                "id": "12",
                                "permission": "bussiness:stroke:update",
                                "pid": "10",
                                "text": "修改行程模板"
                            },
                            {
                                "children": [],
                                "id": "13",
                                "permission": "bussiness:stroke:collection",
                                "pid": "10",
                                "text": "批量操作行程模板"
                            },
                            {
                                "children": [],
                                "id": "14",
                                "permission": "bussiness:stroke:log",
                                "pid": "10",
                                "text": "行程模板日志"
                            }
                        ],
                        "id": "10",
                        "permission": "bussiness:stroke:*",
                        "pid": "3",
                        "text": "行程模板"
                    },
                    {
                        "children": [
                            {
                                "children": [],
                                "id": "16",
                                "permission": "bussiness:roadmanager:add",
                                "pid": "15",
                                "text": "新建线路"
                            },
                            {
                                "children": [],
                                "id": "17",
                                "permission": "bussiness:roadmanager:update",
                                "pid": "15",
                                "text": "修改线路"
                            },
                            {
                                "children": [],
                                "id": "18",
                                "permission": "bussiness:roadmanager:collection",
                                "pid": "15",
                                "text": "批量操作线路"
                            },
                            {
                                "children": [],
                                "id": "19",
                                "permission": "bussiness:roadmanager:log",
                                "pid": "15",
                                "text": "线路操作日志"
                            },
                            {
                                "children": [],
                                "id": "20",
                                "permission": "bussiness:roadmanager:rubbish",
                                "pid": "15",
                                "text": "线路回收站"
                            }
                        ],
                        "id": "15",
                        "permission": "bussiness:roadmanager:*",
                        "pid": "3",
                        "text": "线路管理"
                    }
                ],
                "id": "3",
                "permission": "bussiness:road:*",
                "pid": "2",
                "text": "线路"
            },
            {
                "children": [
                    {
                        "children": [],
                        "id": "22",
                        "permission": "bussiness:regiment:add",
                        "pid": "21",
                        "text": "新建团期"
                    },
                    {
                        "children": [],
                        "id": "23",
                        "permission": "bussiness:regiment:newverify",
                        "pid": "21",
                        "text": "建团审核"
                    },
                    {
                        "children": [],
                        "id": "24",
                        "permission": "bussiness:regiment:update",
                        "pid": "21",
                        "text": "修改团期"
                    },
                    {
                        "children": [],
                        "id": "25",
                        "permission": "bussiness:regiment:copy",
                        "pid": "21",
                        "text": "复制建团"
                    },
                    {
                        "children": [],
                        "id": "26",
                        "permission": "bussiness:regiment:delete",
                        "pid": "21",
                        "text": "删除团期"
                    },
                    {
                        "children": [],
                        "id": "27",
                        "permission": "bussiness:regiment:cancle",
                        "pid": "21",
                        "text": "取消团期"
                    },
                    {
                        "children": [],
                        "id": "28",
                        "permission": "bussiness:regiment:downandup",
                        "pid": "21",
                        "text": "上下线操作"
                    },
                    {
                        "children": [],
                        "id": "29",
                        "permission": "bussiness:regiment:seal",
                        "pid": "21",
                        "text": "封团/解封"
                    },
                    {
                        "children": [],
                        "id": "30",
                        "permission": "bussiness:regiment:sealverify",
                        "pid": "21",
                        "text": "封团审核"
                    },
                    {
                        "children": [],
                        "id": "31",
                        "permission": "bussiness:regiment:end",
                        "pid": "21",
                        "text": "结团操作"
                    },
                    {
                        "children": [],
                        "id": "32",
                        "permission": "bussiness:regiment:statistics",
                        "pid": "21",
                        "text": "我的统计"
                    },
                    {
                        "children": [],
                        "id": "33",
                        "permission": "bussiness:regiment:customerlist",
                        "pid": "21",
                        "text": "查看名单"
                    }
                ],
                "id": "21",
                "permission": "bussiness:regiment:*",
                "pid": "2",
                "text": "团期"
            },
            {
                "children": [
                    {
                        "children": [],
                        "id": "35",
                        "permission": "bussiness:order:newverify",
                        "pid": "34",
                        "text": "新单审核"
                    },
                    {
                        "children": [],
                        "id": "36",
                        "permission": "bussiness:order:refundfirstverify",
                        "pid": "34",
                        "text": "退款初审"
                    },
                    {
                        "children": [],
                        "id": "37",
                        "permission": "bussiness:order:refundlastverify",
                        "pid": "34",
                        "text": "退款终审"
                    },
                    {
                        "children": [],
                        "id": "38",
                        "permission": "bussiness:order:paysettle",
                        "pid": "34",
                        "text": "缴费结算"
                    },
                    {
                        "children": [],
                        "id": "39",
                        "permission": "bussiness:order:refundsettle",
                        "pid": "34",
                        "text": "退款结算"
                    },
                    {
                        "children": [],
                        "id": "40",
                        "permission": "bussiness:order:verify",
                        "pid": "34",
                        "text": "修改审核"
                    },
                    {
                        "children": [],
                        "id": "41",
                        "permission": "bussiness:order:detail",
                        "pid": "34",
                        "text": "订单详情"
                    }
                ],
                "id": "34",
                "permission": "bussiness:order:*",
                "pid": "2",
                "text": "订单"
            },
            {
                "children": [
                    {
                        "children": [
                            {
                                "children": [],
                                "id": "44",
                                "permission": "bussiness:resource:provider:add",
                                "pid": "43",
                                "text": "添加供应商"
                            },
                            {
                                "children": [],
                                "id": "45",
                                "permission": "bussiness:resource:provider:update",
                                "pid": "43",
                                "text": "修改供应商"
                            },
                            {
                                "children": [],
                                "id": "46",
                                "permission": "bussiness:resource:provider:delete",
                                "pid": "43",
                                "text": "删除供应商"
                            }
                        ],
                        "id": "43",
                        "permission": "bussiness:resource:provider:*",
                        "pid": "42",
                        "text": "供应商管理"
                    },
                    {
                        "children": [
                            {
                                "children": [],
                                "id": "48",
                                "permission": "bussiness:resource:guide:add",
                                "pid": "47",
                                "text": "添加导游"
                            },
                            {
                                "children": [],
                                "id": "49",
                                "permission": "bussiness:resource:guide:update",
                                "pid": "47",
                                "text": "修改导游"
                            },
                            {
                                "children": [],
                                "id": "50",
                                "permission": "bussiness:resource:guide:delete",
                                "pid": "47",
                                "text": "删除导游"
                            },
                            {
                                "children": [],
                                "id": "51",
                                "permission": "bussiness:resource:guide:guideregiment",
                                "pid": "47",
                                "text": "排团表"
                            }
                        ],
                        "id": "47",
                        "permission": "bussiness:resource:guide:*",
                        "pid": "42",
                        "text": "导游管理"
                    }
                ],
                "id": "42",
                "permission": "bussiness:resource:*",
                "pid": "2",
                "text": "资源"
            }
        ],
        "id": "2",
        "permission": "bussiness:*",
        "pid": "0",
        "text": "业务"
    },
    {
        "children": [],
        "id": "52",
        "permission": "customer:*",
        "pid": "0",
        "text": "客户管理"
    },
    {
        "children": [],
        "id": "53",
        "permission": "finance:*",
        "pid": "0",
        "text": "财务"
    },
    {
        "children": [],
        "id": "54",
        "permission": "numerical:*",
        "pid": "0",
        "text": "统计报表"
    },
    {
        "children": [
            {
                "children": [
                    {
                        "children": [],
                        "id": "57",
                        "permission": "system:employ:addorg",
                        "pid": "56",
                        "text": "新建组织"
                    },
                    {
                        "children": [],
                        "id": "58",
                        "permission": "system:employ:updateorg",
                        "pid": "56",
                        "text": "编辑组织"
                    },
                    {
                        "children": [],
                        "id": "59",
                        "permission": "system:employ:deleteorg",
                        "pid": "56",
                        "text": "删除组织"
                    },
                    {
                        "children": [],
                        "id": "60",
                        "permission": "system:employ:add",
                        "pid": "56",
                        "text": "添加员工"
                    },
                    {
                        "children": [],
                        "id": "61",
                        "permission": "system:employ:update",
                        "pid": "56",
                        "text": "修改员工"
                    },
                    {
                        "children": [],
                        "id": "62",
                        "permission": "system:employ:delete",
                        "pid": "56",
                        "text": "删除员工"
                    },
                    {
                        "children": [],
                        "id": "63",
                        "permission": "system:employ:leave",
                        "pid": "56",
                        "text": "标记离职"
                    }
                ],
                "id": "56",
                "permission": "system:employ:*",
                "pid": "55",
                "text": "员工帐号"
            },
            {
                "children": [
                    {
                        "children": [],
                        "id": "65",
                        "permission": "system:role:add",
                        "pid": "64",
                        "text": "添加角色"
                    },
                    {
                        "children": [],
                        "id": "66",
                        "permission": "system:role:update",
                        "pid": "64",
                        "text": "修改角色"
                    },
                    {
                        "children": [],
                        "id": "67",
                        "permission": "system:role:delete",
                        "pid": "64",
                        "text": "删除角色"
                    }
                ],
                "id": "64",
                "permission": "system:role:*",
                "pid": "55",
                "text": "角色权限设置"
            }
        ],
        "id": "55",
        "permission": "system:*",
        "pid": "0",
        "text": "系统配置"
    }
]

Roles：所有的角色数据 没有实现权限树的效果，具体实现其实一样，有需要的同学可以实现

[
    {
        "available": "yes",//是否可用
        "children": [//子节点
            {
                "available": "yes",
                "children": [],
                "description": "一级管理员",
                "id": "2",
                "pid": "1",
                "text": "一级管理员"
            },
            {
                "available": "yes",
                "children": [],
                "description": "二级管理员",
                "id": "3",
                "pid": "1",
                "text": "二级管理员"
            }
        ],
        "description": "顶级管理员",//
        "id": "1",//权限id
        "pid": "0",//父id
        "text": "系统管理员"//节点文字描述
    },
    {
        "available": "yes",
        "children": [
            {
                "available": "yes",
                "children": [],
                "description": "董事长",
                "id": "5",
                "pid": "4",
                "text": "董事长"
            },
            {
                "available": "yes",
                "children": [],
                "description": "总经理",
                "id": "6",
                "pid": "4",
                "text": "总经理"
            },
            {
                "available": "yes",
                "children": [],
                "description": "大区经理",
                "id": "7",
                "pid": "4",
                "text": "大区经理"
            },
            {
                "available": "yes",
                "children": [],
                "description": "人事总监",
                "id": "8",
                "pid": "4",
                "text": "人事总监"
            },
            {
                "available": "yes",
                "children": [],
                "description": "财务总监",
                "id": "9",
                "pid": "4",
                "text": "财务总监"
            }
        ],
        "description": "集团领导",
        "id": "4",
        "pid": "0",
        "text": "集团领导"
    },
    {
        "available": "yes",
        "children": [
            {
                "available": "yes",
                "children": [
                    {
                        "available": "yes",
                        "children": [],
                        "description": "业务部经理",
                        "id": "12",
                        "pid": "11",
                        "text": "业务部经理"
                    },
                    {
                        "available": "yes",
                        "children": [],
                        "description": "旅游部经理",
                        "id": "13",
                        "pid": "11",
                        "text": "旅游部经理"
                    }
                ],
                "description": "旅行社社长",
                "id": "11",
                "pid": "10",
                "text": "旅行社社长"
            },
            {
                "available": "yes",
                "children": [],
                "description": "旅行社主任",
                "id": "14",
                "pid": "10",
                "text": "旅行社主任"
            },
            {
                "available": "yes",
                "children": [],
                "description": "酒店店长",
                "id": "15",
                "pid": "10",
                "text": "酒店店长"
            },
            {
                "available": "yes",
                "children": [],
                "description": "酒店主任",
                "id": "16",
                "pid": "10",
                "text": "酒店主任"
            }
        ],
        "description": "分公司领导",
        "id": "10",
        "pid": "0",
        "text": "分公司领导"
    }
]

② OK数据准备完毕，接下来就是测试效果 ，引入js，css什么的咱就不赘述了，自行参考官网实现。Html代码如下，记得把url对应的值变为json所在的位置，个人使用的是数据库版本，所以书写了对应的controller和service等组件，各位也可以尝试一下。

其中需要注意的是用到的方法：
$("#xxx").tree({…}) js异步加载树形结构
$("#xxx").tree(‘getChecked’{…}) 获取所有选中的子节点

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Basic Tree - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="easy/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="easy/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="easy/demo.css">
    <script type="text/javascript" src="easy/jquery.min.js"></script>
    <script type="text/javascript" src="easy/jquery.easyui.min.js"></script>
    <script>
        //选中的权限id
        var pids = ''
        //选中的权限描述
        var pers = ''
        $(function () {
            $("#perms").tree({
                url: '/bm/perm/perms',//数据来源
                checkbox: true,//显示前面的选项框
                //触发check函数  处理权限的父子级问题
                onCheck: function (node) {

                    //获取父节点
                    //判断是否是叶子节点并且被选中
                    if (node.children.length == 0 && node.checkState == 'checked') {
                        //判断节点id是否存在pids中 如果不存在存在的话添加进去
                        if (pids.search(node.id) == -1) {
                            pids += node.id + ","
                            pers += node.text + ","
                        }
                        //处理父子联动的问题
                        leaf(node)
                    //是叶子节点没有选中
                    } else if (node.children.length == 0 && node.checkState == 'unchecked') {
                        //判断节点id是否存在  如果存在的话去除
                        if (pids.search(node.id) != -1) {
                            pids = pids.replace(node.id + ",", "")
                            pers = pers.replace(node.text + ",", "")
                        }
                        //处理父子联动的问题
                        leaf(node)
                    //不是叶子节点且被选中的处理
                    } else if (node.children.length >= 0 && node.checkState == 'checked') {
                        //判断是否是顶级节点  是顶级节点的话且不存在直接添加
                        if (node.pid == '0') {
                            if (pids.search(node.id) == -1) {
                                pids += node.id + ","
                                pers += node.text + ","
                            }
                        }
                        //判断节点id是否存在  存在不做操作  不存在添加
                        if (pids.search(node.id) == -1) {
                            pids += node.id + ","
                            pers += node.text + ","
                        }
                        //解决子节点存在pids的问题  去除所有选中父节点下的子节点的数据
                        childiter(node)
                        //解决父节点选中与否的问题
                        leaf(node)
                    //不是叶子节点且没被选中
                    } else if (node.children.length >= 0 && node.checkState == 'unchecked') {
                        //判断是否是顶级节点
                        if (node.pid == '0') {
                            //如果存在则去除
                            if (pids.search(node.id) != -1) {
                                pids = pids.replace(node.id + ",", "")
                                pers = pers.replace(node.text + ",", "")
                            }
                        }
                        //判断节点是否存在 存在去除
                        if (pids.search(node.id) != -1) {
                            pids = pids.replace(node.id + ",", "")
                            pers = pers.replace(node.text + ",", "")
                        }
                        childiter(node)
                        leaf(node)
                    }
                    //测试效果
                    console.log(pids)
                    $("#pers").text(pers)
                }
            })

            //角色描述
            var rool = ''
            //角色id
            var roolid = ''
            //测试角色和权限添加的效果使用 只看联动效果的请注释掉
            $("#roles").tree({
                url: '/bm/role/roles',
                method: "get",
                //触发check函数
                onClick: function (node) {
                    $("#rols").text(node.text)
                    rool = node.text
                    roolid = node.id
                    $.ajax({
                        url: '/bm/role/showpermsbyroleid',
                        type: "post",
                        data: {"id": roolid},
                        dataType: 'json',
                        success: function (data) {
                            //获取之前被选中的数据并去除
                            var cks = $("#perms").tree('getChecked')
                            for (var i = 0; i < cks.length; i++) {
                                $("#perms").tree('uncheck', cks[i].target)
                            }
                            //获取根据角色查询的权限 从新渲染
                            for (var i = 0; i < data.permissions.length; i++) {
                                $("#perms").tree('check', $("#perms").tree('find', data.permissions[i].id).target)
                            }
                        }
                    })
                }
            })

            //添加角色权限的方法 只看效果的把这一段注释掉
            $("#perr").click(function () {
                $.ajax({
                    url: '/bm/rolepermission/add',
                    type: "post",
                    data: {"rid": roolid, "pid": pids},
                    dataType: 'json',
                    success: function (data) {
                        console.log(data)
                    }
                })
            })

        })


        //循环去除不需要的子节点
        function childiter(node) {
            if (node.children.length > 0) {
                //循环去除存在的子节点
                for (var i = 0; i < node.children.length; i++) {
                    pids = pids.replace(node.children[i].id + ",", "")
                    pers = pers.replace(node.children[i].text + ",", "")
                    childiter(node.children[i])
                }
            }
        }


        //循环判断父节点情况
        function leaf(node) {
            if (node != null) {
                var par = $("#perms").tree('getParent', node.target)
                //判断是否全选了叶子节点
                if (par != null && par.checkState == 'checked') {
                    //循环去除存在子节点
                    for (var i = 0; i < par.children.length; i++) {
                        if (pids.search(par.children[i].id) != -1) {
                            pids = pids.replace(par.children[i].id + ",", "")
                            pers = pers.replace(par.children[i].text + ",", "")
                        }
                    }
                    if (pids.search(par.id) == -1) {
                        pids += par.id + ","
                        pers += par.text + ","
                    }
                    //判断是否不是全选叶子节点
                } else if (par != null && par.checkState == "indeterminate") {
                    //如果父级节点存在 则去除
                    if (pids.search(par.id) != -1) {
                        pids = pids.replace(par.id + ",", "")
                        pers = pers.replace(par.text + ",", "")
                    }

                    for (var i = 0; i < par.children.length; i++) {
                        //判断叶子结点是否被选中
                        if (par.children[i].checkState == 'unchecked') {
                            if (pids.search(par.children[i].id) != -1) {
                                pids = pids.replace(par.children[i].id + ",", "")
                                pers = pers.replace(par.children[i].text + ",", "")
                            }
                        } else {
                            if (pids.search(par.children[i].id) == -1 && par.children[i].checkState == 'checked') {
                                pids += par.children[i].id + ","
                                pers += par.children[i].text + ","
                            }
                        }
                    }
                }
                //迭代判断
                leaf(par)
            }
        }
    </script>
</head>
<body>
<h2>Perms Tree</h2>
<p>dhhs.perms</p>
<div>
    <div class="easyui-panel" style="width: 100%">
        <ul class="easyui-tree" id="perms" style="padding:5px;width: 40%;float:left;">

        </ul>
        <ul class="easyui-tree" id="roles" style="padding:5px;width: 40%;float:left;">

        </ul>
        <input type="button" value="确认添加权限" id="perr" style="position:fixed;margin-top: 80px">
        <div class="easyui-panel"
             style="padding:5px;width: 15%;float:right;height: 500px;position:fixed;;margin-top: 100px">
            <span style="font-size: larger;font-family: '华文行楷'">您选择的角色为：
            </span><br/><span style="color: crimson;font-size: larger;font-family: '华文行楷';" id="rols"></span><br/>

            <span style="font-size: larger;font-family: '华文行楷'">您选择的权限有：
            </span><br/><span style="color: crimson;font-size: larger;font-family: '华文行楷';" id="pers"></span>
        </div>
    </div>
</div>
</body>
<script>

</script>
</html>

感谢各位忍着性子看到这里，下面的代码其实可有可无了，是在尝试的时候写的代码，在完成之后发现其中的冗余程度令人发指，而且只适用固定层级的树结构，故提取出来上面的算是比较精简版的，刚入行的菜鸟，希望大家多多包涵，有兴趣的同学可以看一下最初产品，阿里嘎多。

初心：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Basic Tree - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="easy/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="easy/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="easy/demo.css">
    <script type="text/javascript" src="easy/jquery.min.js"></script>
    <script type="text/javascript" src="easy/jquery.easyui.min.js"></script>
    <script>
        var pids = ''
        var pers = ''
        $(function () {
            $("#perms").tree({
                url: '/bm/perm/perms',
                checkbox: true,
                //触发check函数
                onCheck: function (node) {
                    //获取父节点
                    var par = $("#perms").tree('getParent', node.target)
                    //判断是否是叶子节点并且被选中
                    if (node.children.length == 0 && node.checkState == 'checked') {
                        pids += node.id + ","
                        pers += node.text + ","
                        //判断是否全选了叶子节点
                        if (par != null && par.checkState == 'checked') {
                            //循环去除存在子节点
                            for (var i = 0; i < par.children.length; i++) {
                                if (pids.search(par.children[i].id) != -1) {
                                    pids = pids.replace(par.children[i].id + ",", "")
                                    pers = pers.replace(par.children[i].text + ",", "")
                                }
                            }
                            if (pids.search(par.id) == -1) {
                                pids += par.id + ","
                                pers += par.text + ","
                            }
                            //判断是否不是全选叶子节点
                        } else if (par != null && par.checkState == "indeterminate") {
                            for (var i = 0; i < par.children.length; i++) {
                                //判断叶子结点是否被选中
                                if (par.children[i].checkState == 'unchecked') {
                                    if (pids.search(par.children[i].id) != -1) {
                                        pids = pids.replace(par.children[i].id + ",", "")
                                        pers = pers.replace(par.children[i].text + ",", "")
                                    }
                                } else {
                                    if (pids.search(par.children[i].id) == -1 && par.children.checkState == 'checked') {
                                        pids += par.children[i].id + ","
                                        pers += par.children[i].text + ","
                                    }
                                }
                            }
                        }

                        if (par != null) {
                            //获取父节点的父节点
                            var parr = $("#perms").tree('getParent', par.target)

                            if (parr != null && parr.checkState == 'indeterminate') {
                                //如果父级节点存在 则去除
                                if (pids.search(parr.id) != -1) {
                                    pids = pids.replace(parr.id + ",", "")
                                    pers = pers.replace(parr.text + ",", "")
                                }
                                console.log(pids + "after")
                                //循环判断子节点的情况
                                for (var i = 0; i < parr.children.length; i++) {
                                    //判断叶子结点是否被选中
                                    if (parr != null && parr.children[i].checkState == 'unchecked') {
                                        if (pids.search(parr.children[i].id) != -1) {
                                            pids = pids.replace(parr.children[i].id + ",", "")
                                            pers = pers.replace(parr.children[i].text + ",", "")
                                        }
                                    } else if (parr != null && parr.children[i].checkState == 'checked') {
                                        if (pids.search(parr.children[i].id) == -1 && par.children[i].checkState == 'checked') {
                                            pids += parr.children[i].id + ","
                                            pers += parr.children[i].text + ","
                                        }
                                    }
                                }
                            } else if (parr != null && parr.checkState == 'checked') {
                                //循环去除存在子节点
                                for (var i = 0; i < parr.children.length; i++) {
                                    if (pids.search(parr.children[i].id) != -1) {
                                        pids = pids.replace(parr.children[i].id + ",", "")
                                        pers = pers.replace(parr.children[i].text + ",", "")
                                    }
                                }
                                if (pids.search(parr.id) == -1) {
                                    pids += parr.id + ","
                                    pers += parr.text + ","
                                }
                                //判断是否不是全选叶子节点
                            }

                            //获取父节点的父节点的父节点
                            var parrr = $("#perms").tree('getParent', parr.target)
                            if (parrr != null && parrr.checkState == 'indeterminate') {
                                //如果父级节点存在 则去除
                                if (pids.search(parrr.id) != -1) {
                                    pids = pids.replace(parrr.id + ",", "")
                                    pers = pers.replace(parrr.text + ",", "")
                                }

                                //循环判断子节点的情况
                                for (var i = 0; i < parrr.children.length; i++) {
                                    //判断叶子结点是否被选中
                                    if (parrr != null && parrr.children[i].checkState == 'unchecked') {
                                        if (pids.search(parrr.children[i].id) != -1) {
                                            pids = pids.replace(parrr.children[i].id + ",", "")
                                            pers = pers.replace(parrr.children[i].text + ",", "")
                                        }
                                    } else if (parrr != null && parrr.children[i].checkState == 'checked') {
                                        if (pids.search(parrr.children[i].id) == -1 && parrr.children[i].checkState == 'checked') {
                                            pids += parrr.children[i].id + ","
                                            pers += parrr.children[i].text + ","
                                        }
                                    }
                                }
                            } else if (parrr != null && parrr.checkState == 'checked') {
                                //循环去除存在子节点
                                for (var i = 0; i < parrr.children.length; i++) {
                                    if (pids.search(parrr.children[i].id) != -1) {
                                        pids = pids.replace(parrr.children[i].id + ",", "")
                                        pers = pers.replace(parrr.children[i].text + ",", "")
                                    }
                                }
                                if (pids.search(parrr.id) == -1) {
                                    pids += parrr.id + ","
                                    pers += parrr.text + ","
                                }
                                //判断是否不是全选叶子节点
                            }
                        }

                        //叶子节点没有选中
                    } else if (node.children.length == 0 && node.checkState == 'unchecked') {
                        //判断节点id是否存在
                        if (pids.search(node.id) != -1) {
                            pids = pids.replace(node.id + ",", "")
                            pers = pers.replace(node.text + ",", "")
                            //判断父节点是否是被全选状态
                        } else if (par.checkState == "indeterminate") {
                            //如果父级节点存在 则去除
                            if (pids.search(par.id) != -1) {
                                pids = pids.replace(par.id + ",", "")
                                pers = pers.replace(par.text + ",", "")
                            }
                            //循环判断子节点的情况
                            for (var i = 0; i < par.children.length; i++) {
                                //判断叶子结点是否被选中
                                if (par != null && par.children[i].checkState == 'unchecked') {
                                    if (pids.search(par.children[i].id) != -1) {
                                        pids = pids.replace(par.children[i].id + ",", "")
                                        pers = par.replace(par.children[i].text + ",", "")
                                    }
                                } else  if (par != null && par.children[i].checkState == 'checked') {
                                    if (pids.search(par.children[i].id) == -1 && par.children[i].checkState == 'checked') {
                                        pids += par.children[i].id + ","
                                        pers += par.children[i].text + ","
                                    }
                                }
                            }
                            if (par != null) {
                                //获取父节点的父节点
                                var parr = $("#perms").tree('getParent', par.target)
                                if (parr != null && parr.checkState == 'indeterminate') {
                                    //如果父级节点存在 则去除
                                    if (pids.search(parr.id) != -1) {
                                        pids = pids.replace(parr.id + ",", "")
                                        pers = pers.replace(parr.text + ",", "")
                                    }

                                    //循环判断子节点的情况
                                    for (var i = 0; i < parr.children.length; i++) {
                                        //判断叶子结点是否被选中
                                        if (parr != null && parr.children[i].checkState == 'unchecked') {
                                            if (pids.search(parr.children[i].id) != -1) {
                                                pids = pids.replace(parr.children[i].id + ",", "")
                                                pers = pers.replace(parr.children[i].text + ",", "")
                                            }
                                        } else if (parr != null && parr.children[i].checkState == 'checked') {
                                            if (pids.search(parr.children[i].id) == -1 && par.children[i].checkState == 'checked') {
                                                pids += parr.children[i].id + ","
                                                pers += parr.children[i].text + ","
                                            }
                                        }
                                    }
                                } else if (parr != null && parr.checkState == 'checked') {
                                    //循环去除存在子节点
                                    for (var i = 0; i < parr.children.length; i++) {
                                        if (pids.search(parr.children[i].id) != -1) {
                                            pids = pids.replace(parr.children[i].id + ",", "")
                                            pers = pers.replace(parr.children[i].text + ",", "")
                                        }
                                    }
                                    if (pids.search(parr.id) == -1) {
                                        pids += parr.id + ","
                                        pers += parr.text + ","
                                    }
                                    //判断是否不是全选叶子节点
                                }

                                //获取父节点的父节点的父节点
                                var parrr = $("#perms").tree('getParent', parr.target)
                                if (parrr != null && parrr.checkState == 'indeterminate') {
                                    //如果父级节点存在 则去除
                                    if (pids.search(parrr.id) != -1) {
                                        pids = pids.replace(parrr.id + ",", "")
                                        pers = pers.replace(parrr.text + ",", "")
                                    }

                                    //循环判断子节点的情况
                                    for (var i = 0; i < parrr.children.length; i++) {
                                        //判断叶子结点是否被选中
                                        if (parrr != null && parrr.children[i].checkState == 'unchecked') {
                                            if (pids.search(parrr.children[i].id) != -1) {
                                                pids = pids.replace(parrr.children[i].id + ",", "")
                                                pers = pers.replace(parrr.children[i].text + ",", "")
                                            }
                                        } else if (parrr != null && parrr.children[i].checkState == 'checked') {
                                            if (pids.search(parrr.children[i].id) == -1 && parrr.children[i].checkState == 'checked') {
                                                pids += parrr.children[i].id + ","
                                                pers += parrr.children[i].text + ","
                                            }
                                        }
                                    }
                                } else if (parrr != null && parrr.checkState == 'checked') {
                                    //循环去除存在子节点
                                    for (var i = 0; i < parrr.children.length; i++) {
                                        if (pids.search(parrr.children[i].id) != -1) {
                                            pids = pids.replace(parrr.children[i].id + ",", "")
                                            pers = pers.replace(parrr.children[i].text + ",", "")
                                        }
                                    }
                                    if (pids.search(parrr.id) == -1) {
                                        pids += parrr.id + ","
                                        pers += parrr.text + ","
                                    }
                                    //判断是否不是全选叶子节点
                                }
                            }

                        }
                        //不是叶子节点且被选中的处理
                    } else if (node.children.length >= 0 && node.checkState == 'checked') {
                        //判断是否是顶级节点
                        if (node.pid == '0') {
                            pids += node.id + ","
                            pers += node.text + ","
                        }
                        //判断节点id是否存在  存在不做操作  不存在添加
                        if (pids.search(node.id) == -1) {
                            pids += node.id + ","
                            pers += node.text + ","
                        }

                        if (node.children.length > 0) {
                            //循环去除存在的子节点
                            for (var i = 0; i < node.children.length; i++) {
                                pids = pids.replace(node.children[i].id + ",", "")
                                pers = pers.replace(node.children[i].text + ",", "")
                                if (node.children[i].children.length > 0) {
                                    for (var j = 0; j < node.children[i].children.length; j++) {
                                        pids = pids.replace(node.children[i].children[j].id + ",", "")
                                        pers = pers.replace(node.children[i].children[j].text + ",", "")
                                        if (node.children[i].children[j].children.length > 0) {
                                            for (var k = 0; k < node.children[i].children[j].children.length; k++) {
                                                pids = pids.replace(node.children[i].children[j].children[k].id + ",", "")
                                                pers = pers.replace(node.children[i].children[j].children[k].text + ",", "")
                                            }
                                        }
                                    }
                                }
                            }
                        }


                        if (par != null && par.checkState == "indeterminate") {
                            //如果父级节点存在 则去除
                            if (par != null && pids.search(par.id) != -1) {
                                pids = pids.replace(par.id + ",", "")
                                pers = pers.replace(par.text + ",", "")
                            }
                            //循环判断子节点的情况
                            for (var i = 0; i < par.children.length; i++) {
                                //判断叶子结点是否被选中
                                if (par != null && par.children[i].checkState == 'unchecked') {
                                    if (pids.search(par.children[i].id) != -1) {
                                        pids = pids.replace(par.children[i].id + ",", "")
                                        pers = pers.replace(par.children[i].text + ",", "")
                                    }
                                } else  if (par != null && par.children[i].checkState == 'checked') {
                                    if (pids.search(par.children[i].id) == -1 && par.children[i].checkState == 'checked') {
                                        pids += par.children[i].id + ","
                                        pers += par.children[i].text + ","
                                    }
                                }
                            }

                        } else if (par != null && par.checkState == 'checked') {
                            //循环去除存在子节点
                            for (var i = 0; i < par.children.length; i++) {
                                if (pids.search(par.children[i].id) != -1) {
                                    pids = pids.replace(par.children[i].id + ",", "")
                                    pers = pers.replace(par.children[i].text + ",", "")
                                }
                            }
                            if (pids.search(par.id) == -1) {
                                pids += par.id + ","
                                pers += par.text + ","
                            }
                            //判断是否不是全选叶子节点
                        }

                        //获取父节点的父节点
                        if (par != null) {
                            var parr = $("#perms").tree('getParent', par.target)
                            if (parr != null) {
                                if (parr != null && parr.checkState == 'indeterminate') {
                                    //如果父级节点存在 则去除
                                    if (pids.search(parr.id) != -1) {
                                        pids = pids.replace(parr.id + ",", "")
                                        pers = pers.replace(parr.text + ",", "")
                                    }
                                    //循环判断子节点的情况
                                    for (var i = 0; i < parr.children.length; i++) {
                                        //判断叶子结点是否被选中
                                        if (parr != null && parr.children[i].checkState == 'unchecked') {
                                            if (pids.search(parr.children[i].id) != -1) {
                                                pids = pids.replace(parr.children[i].id + ",", "")
                                                pers = par.replace(parr.children[i].text + ",", "")
                                            }
                                        } else if (parr != null && parr.children[i].checkState == 'checked') {
                                            if (pids.search(parr.children[i].id) == -1 && parr.children[i].checkState == 'checked') {
                                                pids += parr.children[i].id + ","
                                                pers += parr.children[i].text + ","
                                            }
                                        }
                                    }
                                } else if (parr != null && parr.checkState == 'checked') {
                                    //循环去除存在子节点
                                    for (var i = 0; i < parr.children.length; i++) {
                                        if (pids.search(parr.children[i].id) != -1) {
                                            pids = pids.replace(parr.children[i].id + ",", "")
                                            pers = pers.replace(parr.children[i].text + ",", "")
                                        }
                                    }
                                    if (pids.search(parr.id) == -1) {
                                        pids += parr.id + ","
                                        pers += parr.text + ","
                                    }
                                    //判断是否不是全选叶子节点
                                }
                            }
                        }
                        //不是叶子节点且没被选中
                    } else if (node.children.length >= 0 && node.checkState == 'unchecked') {
                        //判断是否是顶级节点
                        if (node.pid == '0') {
                            //如果存在则去除
                            if (pids.search(node.id) != -1) {
                                pids = pids.replace(node.id + ",", "")
                                pers = pers.replace(node.text + ",", "")
                            }
                        }
                        //判断节点是否存在 存在去除
                        if (pids.search(node.id) != -1) {
                            pids = pids.replace(node.id + ",", "")
                            pers = pers.replace(node.text + ",", "")
                        }

                        if (node.children.length > 0) {
                            //循环去除存在的子节点
                            for (var i = 0; i < node.children.length; i++) {
                                pids = pids.replace(node.children[i].id + ",", "")
                                pers = pers.replace(node.children[i].text + ",", "")
                                if (node.children[i].children.length > 0) {
                                    for (var j = 0; j < node.children[i].children.length; j++) {
                                        pids = pids.replace(node.children[i].children[j].id + ",", "")
                                        pers = pers.replace(node.children[i].children[j].text + ",", "")
                                        if (node.children[i].children[j].children.length > 0) {
                                            for (var k = 0; k < node.children[i].children[j].children.length; k++) {
                                                pids = pids.replace(node.children[i].children[j].children[k].id + ",", "")
                                                pers = pers.replace(node.children[i].children[j].children[k].text + ",", "")
                                            }
                                        }
                                    }
                                }
                            }
                        }


                        //父节点不为空且不是子节点全部选中
                        if (par != null && par.checkState == 'indeterminate') {
                            //如果父级节点存在 则去除
                            if (pids.search(par.id) != -1) {
                                pids = pids.replace(par.id + ",", "")
                                pers = pers.replace(par.text + ",", "")
                            }
                            //循环判断子节点的情况
                            for (var i = 0; i < par.children.length; i++) {
                                //判断叶子结点是否被选中
                                if (par != null && par.children[i].checkState == 'unchecked') {
                                    //不被选中则去除
                                    if (pids.search(par.children[i].id) != -1) {
                                        pids = pids.replace(par.children[i].id + ",", "")
                                        pers = pers.replace(par.children[i].text + ",", "")
                                    }
                                } else if (par != null && par.children[i].checkState == 'checked') {
                                    if (pids.search(par.children[i].id) == -1 && par.children[i].checkState == 'checked') {
                                        pids += par.children[i].id + ","
                                        pers += par.children[i].text + ","
                                    }
                                }
                            }
                        } else if (par != null && par.checkState == 'checked') {
                            //循环去除存在子节点
                            for (var i = 0; i < par.children.length; i++) {
                                if (pids.search(par.children[i].id) != -1) {
                                    pids = pids.replace(par.children[i].id + ",", "")
                                    pers = pers.replace(par.children[i].text + ",", "")
                                }
                            }
                            if (pids.search(par.id) == -1) {
                                pids += par.id + ","
                                pers += par.text + ","
                            }
                            //判断是否不是全选叶子节点
                        }

                        //获取父节点的父节点
                        if (par != null) {
                            var parr = $("#perms").tree('getParent', par.target)

                            if (parr != null) {
                                if (parr != null && parr.checkState == 'indeterminate') {
                                    //如果父级节点存在 则去除
                                    if (pids.search(parr.id) != -1) {
                                        pids = pids.replace(parr.id + ",", "")
                                        pers = pers.replace(parr.text + ",", "")
                                    }

                                    //循环判断子节点的情况
                                    for (var i = 0; i < parr.children.length; i++) {
                                        //判断叶子结点是否被选中
                                        if (parr != null && parr.children[i].checkState == 'unchecked') {
                                            if (pids.search(parr.children[i].id) != -1) {
                                                pids = pids.replace(parr.children[i].id + ",", "")
                                                pers = par.replace(parr.children[i].text + ",", "")
                                            }
                                        } else if (parr != null && parr.children[i].checkState == 'checked') {
                                            if (pids.search(parr.children[i].id) == -1 && parr.children[i].checkState == 'checked') {
                                                pids += parr.children[i].id + ","
                                                pers += parr.children[i].text + ","
                                            }
                                        }
                                    }
                                } else if (parr != null && parr.checkState == 'checked') {
                                    //循环去除存在子节点
                                    for (var i = 0; i < parr.children.length; i++) {
                                        if (pids.search(parr.children[i].id) != -1) {
                                            pids = pids.replace(parr.children[i].id + ",", "")
                                            pers = pers.replace(parr.children[i].text + ",", "")
                                        }
                                    }
                                    if (pids.search(parr.id) == -1) {
                                        pids += parr.id + ","
                                        pers += parr.text + ","
                                    }
                                    //判断是否不是全选叶子节点
                                }
                            }
                        }
                    }
                    console.log(pids)
                    $("#pers").text(pers)
                }
            })

            var  rool  =  ''
            var  roolid = ''
            $("#roles").tree({
                url: '/bm/role/roles',
                method: "get",
                //触发check函数
                onClick: function (node) {
                    $("#rols").text(node.text)
                    rool = node.text
                    roolid = node.id
                }
            })

            $("#perr").click(function () {
                alert("your  role is  :"  + roolid + "||||||" + "your   perms is :"  + pids)
                $.ajax({
                    url : '/bm/rolepermission/add',
                    type : "post",
                    data : {"rid" : roolid ,"pids" : pids},
                    dataType : 'json',
                    success :function (data) {
                        console.log(data)
                    }
                })
            })

        })

    </script>
</head>
<body>
<h2>Perms Tree</h2>
<p>dhhs.perms</p>
<div>
    <div class="easyui-panel" style="width: 100%">
        <ul class="easyui-tree" id="perms" style="padding:5px;width: 40%;float:left;">

        </ul>
        <ul class="easyui-tree" id="roles" style="padding:5px;width: 40%;float:left;">

        </ul>
        <input type="button"  value = "确认添加权限"  id = "perr" style="position:fixed;margin-top: 80px">
        <div class="easyui-panel"
             style="padding:5px;width: 15%;float:right;height: 500px;position:fixed;;margin-top: 100px">
            <span style="font-size: larger;font-family: '华文行楷'">您选择的角色为：
            </span><br/><span style="color: crimson;font-size: larger;font-family: '华文行楷';" id="rols"></span><br/>

            <span style="font-size: larger;font-family: '华文行楷'">您选择的权限有：
            </span><br/><span style="color: crimson;font-size: larger;font-family: '华文行楷';" id="pers"></span>
        </div>
    </div>
</div>
</body>
<script>

</script>
</html>