美文网首页
使用Easyui -tree解决权限控制问题

使用Easyui -tree解决权限控制问题

作者: 风飞燕 | 来源:发表于2018-10-29 16:22 被阅读15次

接触javaWeb没有多久，碰到一个需求，对我来说头很大，反正没有大神帮忙我是解决不了的。先说一下需求：复选框有三种状态，待选、选中、未选中，我就说一下待选中状态，当节点有子节点的时候，选中子节点,这个节点的所有上层节点都要设置为待选状态，即使当前层次的全部节点被选中，上层节点依然是待选状态，选中父节点，所有下层节点全部选中置灰且不可在点选，取消这个父节点选中状态，所有下级节点全部置为未选中状态。对于最后上传的数据，如果存在父节点，只需要父节点数据，若没有传选中子节点的数据。效果大概就是这个样子的


多层控制树.png

下面展示解决代码

  var add=[];//新增权限
var del=[];//修改权限
var checkprestate = true;
var isnull = true;
var checked_other = true;

//获取树
function getTree(sUrl){
    $("#rootTree").tree({
        url:sUrl,
        checkbox:true,
        cascadeCheck:false,
        lines:true,
        queryParams:{'cwr_prj_name':$("#u_Prj").textbox("getValue"),'cwr_prj_area':$("#u_Qu").combobox("getValue"),'cwr_userid':eaf_id},
        formatter:function(node){
            return node.text;
        },
        onLoadSuccess:function(node, data){
            layer.closeAll();
            if(node==null && data!=null){
                for(var k=0;k<data.length;k++){
                    if(data[k].HASCHILDS){
                        $("#"+data[k].domId+' .tree-checkbox').removeClass('tree-checkbox0');
                        $("#"+data[k].domId+' .tree-checkbox').removeClass('tree-checkbox1');
                        $("#"+data[k].domId+' .tree-checkbox').removeClass('tree-checkbox2');
                        $("#"+data[k].domId+' .tree-checkbox').addClass('tree-checkbox2');
                    }   
                }
            }else if(node!=null){
                for(var k=0;k<data.length;k++){
                    if(node.children[k].HASCHILDS){
                        $("#"+node.children[k].domId+' .tree-checkbox').removeClass('tree-checkbox0');
                        $("#"+node.children[k].domId+' .tree-checkbox').removeClass('tree-checkbox1');
                        $("#"+node.children[k].domId+' .tree-checkbox').removeClass('tree-checkbox2');
                        $("#"+node.children[k].domId+' .tree-checkbox').addClass('tree-checkbox2');
                    }   
                }
            }
            if(data.EAF_ERROR!=null){
              parent.layer.msg("对不起！未找到对应信息！",{icon:0,time: 3000});
              return false;
            }
            if($("#u_Prj").textbox("getValue")||$("#u_Qu").combobox("getValue")){
                //$("#rootTree").tree('expandAll');//查询展开所有节点
                var rootsArray = $("#rootTree").tree('getRoots');
                if(rootsArray){
                    for(var i=0;i<rootsArray.length;i++){
                        var rootNode = rootsArray[i];
                        if(rootNode){
                            $("#rootTree").tree('expand',rootNode.target);
                        }
                    }
                }
            }
        },
        onBeforeCheck:function(node, checked){
            //根节点是不能点击的
            var haveParent = $('#rootTree').tree('getParent',node.target);
            if(haveParent == null){ 
                return false;
            }
            checkprestate = $("#"+node.domId+' .tree-title').prev().hasClass('tree-checkbox2');
        },
        onBeforeExpand:function(node){
            //layer.load(2);
            isnull = $("#"+node.domId+' .tree-title').prev().hasClass('tree-checkbox0');//是否是未勾选状态
            checked_other = $("#"+node.domId+' .tree-title').prev().hasClass('tree-checkGray');
        },
        onExpand:function(node){
            layer.closeAll();
            var checked = node.checked;
            if(node.children){
                if(checked || checked_other){//节点选中处理
                    $("#"+node.domId+' .tree-title').prev().removeClass('tree-checkGray');
                    $("#"+node.domId+' .tree-title').prev().removeClass('tree-checkbox0');
                    $("#"+node.domId+' .tree-title').prev().removeClass('tree-checkbox1');
                    $("#"+node.domId+' .tree-title').prev().removeClass('tree-checkbox2');
                    $("#"+node.domId+' .tree-title').prev().removeClass('tree-checkbox');
                    $("#"+node.domId+' .tree-title').prev().addClass('tree-checkbox');
                    if(checked){
                        $("#"+node.domId+' .tree-title').prev().addClass('tree-checkbox1');
                    }
                    if(checked_other){
                        $("#"+node.domId+' .tree-title').prev().addClass('tree-checkGray');
                    }
                    for(var i=0;i<node.children.length;i++){
                        var id=node.children[i].domId;
                        $("#"+id+' .tree-title').prev().removeClass('tree-checkbox0');
                        $("#"+id+' .tree-title').prev().removeClass('tree-checkbox1');
                        $("#"+id+' .tree-title').prev().removeClass('tree-checkbox2');
                        $("#"+id+' .tree-title').prev().removeClass('tree-checkbox');
                        $("#"+id+' .tree-title').prev().addClass('tree-checkGray');
                        $("#"+id+' .tree-title').css('color','#a0a0a0');
                    }
                }else if(isnull){
                    $("#"+node.domId+' .tree-title').prev().removeClass('tree-checkGray');
                    $("#"+node.domId+' .tree-title').prev().removeClass('tree-checkbox0');
                    $("#"+node.domId+' .tree-title').prev().removeClass('tree-checkbox1');
                    $("#"+node.domId+' .tree-title').prev().removeClass('tree-checkbox2');
                    $("#"+node.domId+' .tree-title').prev().removeClass('tree-checkbox');
                    $("#"+node.domId+' .tree-title').prev().addClass('tree-checkbox');
                    $("#"+node.domId+' .tree-title').prev().addClass('tree-checkbox0');
                    for(var i=0;i<node.children.length;i++){
                        var id=node.children[i].domId;
                        $("#"+id+' .tree-title').prev().removeClass('tree-checkGray');
                        $("#"+id+' .tree-title').prev().removeClass('tree-checkbox0');
                        $("#"+id+' .tree-title').prev().removeClass('tree-checkbox1');
                        $("#"+id+' .tree-title').prev().removeClass('tree-checkbox2');
                        $("#"+id+' .tree-title').prev().removeClass('tree-checkbox');
                        $("#"+id+' .tree-title').prev().addClass('tree-checkbox');
                        $("#"+id+' .tree-title').prev().addClass('tree-checkbox0');
                        $("#"+id+' .tree-title').css('color','#000');   
                    }
                }
            }   

        },
        onCheck:function(node, checked){
            if(checked==false && checkprestate){//用于特殊处理他本来是待选的，现在我勾选，他之前勾选后变成未勾选，但是修改为勾选
                $(this).tree('check', node.target);
                return false;
            }
            
            
            if(checked){//选中
                if(node.children){//如果点击的是父节点
                        for(var i=0;i<node.children.length;i++){
                            var id=node.children[i].domId;
                            $("#"+id+' .tree-title').prev().removeClass('tree-checkbox0');
                            $("#"+id+' .tree-title').prev().removeClass('tree-checkbox1');
                            $("#"+id+' .tree-title').prev().removeClass('tree-checkbox2');
                            $("#"+id+' .tree-title').prev().removeClass('tree-checkbox');
                            $("#"+id+' .tree-title').prev().addClass('tree-checkGray');
                            $("#"+id+' .tree-title').css('color','#a0a0a0');
                            if(node.children[i].children){
                                var subnode =node.children[i].children;
                                for(var j=0;j<subnode.length;j++){
                                    var subid=subnode[j].domId;
                                    $("#"+subid+' .tree-title').prev().removeClass('tree-checkbox0');
                                    $("#"+subid+' .tree-title').prev().removeClass('tree-checkbox1');
                                    $("#"+subid+' .tree-title').prev().removeClass('tree-checkbox2');
                                    $("#"+subid+' .tree-title').prev().removeClass('tree-checkbox');
                                    $("#"+subid+' .tree-title').prev().addClass('tree-checkGray');
                                    $("#"+subid+' .tree-title').css('color','#a0a0a0');
                                }
                             }
                        }
                }
                handlecheck(node);
                removeDelList(node.EAF_ID);
                add.push({'CWR_DATAOBJ_ID':node.EAF_ID,'CWR_TYPE':node.CWR_TYPE,'CWR_PROJ_ID':node.CWR_PRJID,'CWR_COM_ID':node.CWR_COMID});
                //处理父节点
                rembox(node);
                
            }else{//未选中
                
                if(node.children){
                    for(var i=0;i<node.children.length;i++){
                        var id=node.children[i].domId;
                        $("#"+id+' .tree-title').prev().removeClass('tree-checkGray');
                        $("#"+id+' .tree-title').prev().removeClass('tree-checkbox0');
                        $("#"+id+' .tree-title').prev().removeClass('tree-checkbox1');
                        $("#"+id+' .tree-title').prev().removeClass('tree-checkbox2');
                        $("#"+id+' .tree-title').prev().removeClass('tree-checkbox');
                        $("#"+id+' .tree-title').prev().addClass('tree-checkbox');
                        $("#"+id+' .tree-title').prev().addClass('tree-checkbox0');
                        $("#"+id+' .tree-title').css('color','#000');   
                        if(node.children[i].children){
                            var subnode =node.children[i].children;
                            for(var j=0;j<subnode.length;j++){
                                var subid=subnode[j].domId;
                                $("#"+subid+' .tree-title').prev().removeClass('tree-checkGray');
                                $("#"+subid+' .tree-title').prev().removeClass('tree-checkbox0');
                                $("#"+subid+' .tree-title').prev().removeClass('tree-checkbox1');
                                $("#"+subid+' .tree-title').prev().removeClass('tree-checkbox2');
                                $("#"+subid+' .tree-title').prev().removeClass('tree-checkbox');
                                $("#"+subid+' .tree-title').prev().addClass('tree-checkbox');
                                $("#"+subid+' .tree-title').prev().addClass('tree-checkbox0');
                                $("#"+subid+' .tree-title').css('color','#000');    
                            }
                        }
                    }
                }
                removeAddList(node.EAF_ID);
                del.push({'CWR_DATAOBJ_ID':node.EAF_ID,'CWR_TYPE':'','CWR_PROJ_ID':'','CWR_COM_ID':''});
                //处理父节点
                rembox2(node);
    
            }
        },
        /*onBeforeExpand:function(node){
                alert(node.CWR_TYPE);
        },*/
        animate:true    
    });
}

function rembox(node){
    var prt=$("#rootTree").tree("getParent",node.target);
    if(prt){
            $("#"+prt.domId+' .tree-title').prev().removeClass('tree-checkbox0');
            $("#"+prt.domId+' .tree-title').prev().removeClass('tree-checkbox1');
            $("#"+prt.domId+' .tree-title').prev().removeClass('tree-checkbox2');
            $("#"+prt.domId+' .tree-title').prev().removeClass('tree-checkbox');
            $("#"+prt.domId+' .tree-title').prev().addClass('tree-checkbox2');
            $("#"+prt.domId+' .tree-title').prev().addClass('tree-checkbox');
            rembox(prt) 
    }
}
function rembox2(node){
    var parent=$("#rootTree").tree("getParent",node.target);
    var hsa=false;
    if(parent){
        for(var i=0;i<parent.children.length;i++){
            if(parent.children[i]._checked||$("#"+parent.children[i].domId+' .tree-checkbox2').length>0)    hsa=true;
        }
        if(!hsa){
            $("#"+parent.domId+' .tree-checkbox').removeClass('tree-checkbox2');
            $("#"+parent.domId+' .tree-checkbox').addClass('tree-checkbox0');
        }
        if($("#"+parent.domId+' .tree-checkbox2').length==0)        
        rembox2(parent);
    }   
}
function handlecheck(node){
    getChildren("/txieasyui?taskFramePN=AuthorizationManagement&command=getChildsByPid&colname=json_ajax&colname1={'dataform':'eui_datagrid_data','tablename':'detail0','footerfields':''}&cwr_userid="+eaf_id+"&id="+node.id);
}
//获取选中子项
function getChildren(sUrl){
       $.ajax({
           type: "POST",
           url:sUrl,
           async:false,
           contentType: "application/json; charset=UTF-8", //必须有
           dataType: "json", //表示返回值类型，不必须
           success: function (data) {
               layer.closeAll();
                if(data){  
                    for( var i= 0; i<data.rows.length;i++ ){
                         removeAddList(data.rows[i].EAF_ID);
                         var flag = true;
                         for (var j = 0;j<del.length;j++){
                            if(data.rows[i].EAF_ID == del[j].CWR_DATAOBJ_ID){
                                flag = false;
                                break;
                            }
                         }
                         if(flag){
                            del.push({'CWR_DATAOBJ_ID':data.rows[i].EAF_ID,'CWR_TYPE':'','CWR_PROJ_ID':'','CWR_COM_ID':''});
                         }
                    }
                }
            }   
                
                   });
}
function removeAddList(id){
    for(var i=0;i<add.length;i++){
        if(add[i].CWR_DATAOBJ_ID == id){
            add.splice(i,1);
            i--;
        }
    }
}
function removeDelList(id){
    for(var i=0;i<del.length;i++){
        if(del[i].CWR_DATAOBJ_ID == id){
            del.splice(i,1);
            i--;
        }
    }
}

大概的处理就是这样的
数据是这个样子的

[
    {
        "CWR_PRJID":"00000000000000000000000000000000",
        "EAF_ID":"00000000000000000000000000000007",
        "EAF_HASCHILD":"1",
        "EAF_PID":"00000000000000000000000000000000",
        "CWR_TYPE":"0",
        "CWR_PRJ_AREA":"07",
        "EAF_NAME":"钦州市",
        "CWR_COMID":"00000000000000000000000000000000",
        "HASCHILDS":"true",
        "id":"00000000000000000000000000000007",
        "text":"钦州市",
        "state":"closed"
    },
    {
        "CWR_PRJ_AREA":"02",
        "EAF_PID":"00000000000000000000000000000000",
        "EAF_HASCHILD":"1",
        "CWR_COMID":"00000000000000000000000000000000",
        "CWR_TYPE":"0",
        "EAF_NAME":"梧州市",
        "EAF_ID":"00000000000000000000000000000002",
        "CWR_PRJID":"00000000000000000000000000000000",
        "id":"00000000000000000000000000000002",
        "text":"梧州市",
        "state":"closed"
    },
    {
        "CWR_PRJ_AREA":"03",
        "EAF_PID":"00000000000000000000000000000000",
        "EAF_HASCHILD":"1",
        "CWR_COMID":"00000000000000000000000000000000",
        "CWR_TYPE":"0",
        "EAF_NAME":"北海市",
        "EAF_ID":"00000000000000000000000000000003",
        "CWR_PRJID":"00000000000000000000000000000000",
        "id":"00000000000000000000000000000003",
        "text":"北海市",
        "state":"closed"
    },
    {
        "CWR_PRJ_AREA":"04",
        "EAF_PID":"00000000000000000000000000000000",
        "EAF_HASCHILD":"1",
        "CWR_COMID":"00000000000000000000000000000000",
        "CWR_TYPE":"0",
        "EAF_NAME":"柳州市",
        "EAF_ID":"00000000000000000000000000000004",
        "CWR_PRJID":"00000000000000000000000000000000",
        "id":"00000000000000000000000000000004",
        "text":"柳州市",
        "state":"closed"
    },
    {
        "CWR_PRJ_AREA":"05",
        "EAF_PID":"00000000000000000000000000000000",
        "EAF_HASCHILD":"1",
        "CWR_COMID":"00000000000000000000000000000000",
        "CWR_TYPE":"0",
        "EAF_NAME":"桂林市",
        "EAF_ID":"00000000000000000000000000000005",
        "CWR_PRJID":"00000000000000000000000000000000",
        "id":"00000000000000000000000000000005",
        "text":"桂林市",
        "state":"closed"
    },
    {
        "CWR_PRJ_AREA":"99",
        "EAF_PID":"00000000000000000000000000000000",
        "EAF_HASCHILD":"1",
        "CWR_COMID":"00000000000000000000000000000000",
        "CWR_TYPE":"0",
        "EAF_NAME":"无区域项目",
        "EAF_ID":"00000000000000000000000000000099",
        "CWR_PRJID":"00000000000000000000000000000000",
        "id":"00000000000000000000000000000099",
        "text":"无区域项目",
        "state":"closed"
    },
    {
        "CWR_PRJ_AREA":"08",
        "EAF_PID":"00000000000000000000000000000000",
        "EAF_HASCHILD":"1",
        "CWR_COMID":"00000000000000000000000000000000",
        "CWR_TYPE":"0",
        "EAF_NAME":"贵港市",
        "EAF_ID":"00000000000000000000000000000008",
        "CWR_PRJID":"00000000000000000000000000000000",
        "id":"00000000000000000000000000000008",
        "text":"贵港市",
        "state":"closed"
    },
    {
        "CWR_PRJ_AREA":"09",
        "EAF_PID":"00000000000000000000000000000000",
        "EAF_HASCHILD":"1",
        "CWR_COMID":"00000000000000000000000000000000",
        "CWR_TYPE":"0",
        "EAF_NAME":"玉林市",
        "EAF_ID":"00000000000000000000000000000009",
        "CWR_PRJID":"00000000000000000000000000000000",
        "id":"00000000000000000000000000000009",
        "text":"玉林市",
        "state":"closed"
    },
    {
        "CWR_PRJ_AREA":"10",
        "EAF_PID":"00000000000000000000000000000000",
        "EAF_HASCHILD":"1",
        "CWR_COMID":"00000000000000000000000000000000",
        "CWR_TYPE":"0",
        "EAF_NAME":"百色市",
        "EAF_ID":"00000000000000000000000000000010",
        "CWR_PRJID":"00000000000000000000000000000000",
        "id":"00000000000000000000000000000010",
        "text":"百色市",
        "state":"closed"
    },
    {
        "CWR_PRJ_AREA":"01",
        "EAF_PID":"00000000000000000000000000000000",
        "EAF_HASCHILD":"1",
        "CWR_COMID":"00000000000000000000000000000000",
        "CWR_TYPE":"0",
        "EAF_NAME":"南宁市",
        "EAF_ID":"00000000000000000000000000000001",
        "CWR_PRJID":"00000000000000000000000000000000",
        "id":"00000000000000000000000000000001",
        "text":"南宁市",
        "state":"closed"
    },
    {
        "CWR_PRJ_AREA":"06",
        "EAF_PID":"00000000000000000000000000000000",
        "EAF_HASCHILD":"1",
        "CWR_COMID":"00000000000000000000000000000000",
        "CWR_TYPE":"0",
        "EAF_NAME":"防城港市",
        "EAF_ID":"00000000000000000000000000000006",
        "CWR_PRJID":"00000000000000000000000000000000",
        "id":"00000000000000000000000000000006",
        "text":"防城港市",
        "state":"closed"
    }
]

到此，这个功能被攻克，👏

相关文章

  • 使用Easyui -tree解决权限控制问题

    接触javaWeb没有多久，碰到一个需求，对我来说头很大，反正没有大神帮忙我是解决不了的。先说一下需求：复选框有三...

  • 前端入门练手项目

    前端练手：左树右表的后台管理界面。 前端一些特殊功能 权限管理 权限控制其实就是登录功能的加强版。使用Easyui...

  • easyui-tree扩展方法

    /** * 1）扩展jquery easyui tree的节点检索方法。使用方法如下： * $("#treeId"...

  • Mac程序文件权限问题

    在Mac命令行应用某些程序时出现权限限制，例如使用brew安装的tree时出现以下情况： 解决方案：修改文件权限：...

  • iOS开发所忘记的.gitignore

    今天开发使用source tree合并冲突的问题解决后运行工程 source tree老出现这种状况： 经过网上查...

  • easyui-Tree

    1、树节点前面是否显示复选框(接口初加载) 2、设置某个或某些节点前不显示复选框 3、解决点击展开节点重复加载数据...

  • django进阶技巧

    权限控制 在有较多方法需要权限控制时：可使用权限控制中间件，permissionMiddleWare 在只有少量方...

  • CDH权限问题的非最佳解决

    在cloudera里面设置本地运行目录用户设为root解决本地文件读取权限问题。然后再把hdfs内部的权限控制关掉...

  • win10 卸载Java报2503错

    问题：在控制面板卸载Java报2503错，但是Java又不能再次使用了 原因：没有管理员权限 解决方法：1.右击任...

  • RBAC模型概述

    什么是RBAC 注意不是RABC，手抖容易打错。 RBAC（基于角色的权限控制）模型是为了解决系统中的权限管理问题...

网友评论

      本文标题：使用Easyui -tree解决权限控制问题

      本文链接：https://www.haomeiwen.com/subject/ledesftx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|使用Easyui -tree解决权限控制问题|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！