easyui tree扩展tree方法获取目标节点的一级子节点

Easyui tree扩展tree方法获取目标节点的一级子节点

/*  只返回目标节点的第一级子节点，具体的用法和getChildren方法是一样的 */
$.extend($.fn.tree.methods,{
    getLeafChildren:function(jq, params){
        var nodes = [];
        $(params).next().children().children("div.tree-node").each(function(){
            nodes.push($(jq[0]).tree('getNode',this));
        });
        return nodes;
    }
});

项目中需要实现以下效果，点击左边tree,在右边显示小区，而且小区所属的区、市、省也要对应显示出来。

1、选中的节点，显示在右边区域

2、点击右边的收缩查看--展开折叠效果

3、遍历右边 省市区没有，则移除父级-市；省市没有时，移除父级-省

 

实现的代码如下

$('#tree-box').tree({
        url : "termin***tion!initTress.html",
       // data : treejson,
        animate : true,
        checkbox : true,
        cascadeCheck : true,
        onlyLeafCheck : false,
        lines : true,
        dnd : false,
       
        onCheck : function (node,checked) {           /*选中的节点，显示在右边区域*/
            var node = node;
            moveToRight(node);
        }
}

/*选中的节点，显示在右边区域*/
function moveToRight(node){

    var tree = $("#tree-box");//树标签
    var lelOne = tree.tree('getRoots');//一级节点（省）
    var lelOneLength = lelOne.length;
//    console.log(lelOne);
    if(lelOneLength>0){
        //遍历一级节点
        for(var i=0;i<lelOneLength;i++){
            var lelTwo = tree.tree('getLeafChildren', lelOne[i].target);//二级节点（市）
            var lelTwoLength = lelTwo.length;
//        console.log(lelTwo);
            if(lelTwoLength>0){
                //遍历二级节点
                for(var j=0;j<lelTwoLength;j++){
                    var lelTree = tree.tree('getLeafChildren', lelTwo[j].target);//三级节点（县、区）
                    var lelTreeLength = lelTree.length;
//            console.log(lelTree);
                    if(lelTreeLength>0){
                        //遍历三级节点
                        for(var k=0;k<lelTreeLength;k++){
                            var lelFour = tree.tree('getLeafChildren', lelTree[k].target);//四级节点（小区）
                            var lelFourLength = lelFour.length;
                            var housecheck = 0;

                            if(lelFourLength>0){
                                //遍历四级节点，小区
                                for(var m=0;m<lelFourLength;m++){
                                    if(lelFour[m].checked){
                                        housecheck = 1;
                                    }
                                }
                                //该县区没有小区被勾选
                                if(housecheck==0){
//                                    console.log(lelTree[k]);
                                    var Parent1_none = lelTree[k].domId; //父级（小区所在的县、区）
                                    var Parent1DomId_none = "#"+Parent1_none+"l";
                                    var Parent1DomId_none_children = "."+Parent1_none;
                                    if($("#win").find(Parent1DomId_none).length>0){
                                        $("#win").find(Parent1DomId_none).remove();
                                        $("#win").find(Parent1DomId_none_children).remove();
                                    }

                                }
                                //该县区有小区被勾选
                                if(housecheck==1){
                                    var Parent1 = tree.tree('getParent', lelFour[0].target);//父级（小区所在的县、区）
                                    var Parent2 = tree.tree('getParent', Parent1.target);//父级（小区所在的市）
                                    var Parent3 = tree.tree('getParent', Parent2.target);//父级（小区所在的省）

                                    var sheng = '<div class="path-box path-box3" id="' + Parent3.domId +"l"+ '">' +
                                        '<div class="path path3 clearfix">' +
                                        '<div class="path-delete path-delete3 fl"></div>' +
                                        '<div class="area-title fl">' + Parent3.text + '</div>' +
                                        /*'<div class="area-title fl">（132）</div>' +*/
                                        '<div class="area-title control unfold fl">收缩</div></div>'+
                                        '</div></div>';

                                    var shengshi = '<div class="path-box path-box2" id="' + Parent2.domId +"l"+ '">' +
                                        '<div class="path path2 clearfix">' +
                                        '<div class="path-delete path-delete2 fl"></div>' +
                                        '<div class="area-title fl">' + Parent3.text + '</div>' +
                                        '<div class="area-title fl">&gt;</div>' +
                                        '<div class="area-title fl">' + Parent2.text + '</div>' +
                                        /*'<div class="area-title fl">（132）</div>' +*/
                                        '<div class="area-title control unfold fl">收缩</div></div>'+
                                        '</div></div>';

                                    var shengshiqu = '<div class="path-box path-box1" id="' + Parent1.domId +"l"+ '">' +
                                        '<div class="path path1 clearfix">' +
                                            '<div class="path-delete path-delete1 fl"></div>' +
                                            '<div class="area-title fl">' + Parent3.text + '</div>' +
                                            '<div class="area-title fl">&gt;</div>' +
                                            '<div class="area-title fl">' + Parent2.text + '</div>' +
                                            '<div class="area-title fl">&gt;</div>' +
                                            '<div class="area-title fl">' + Parent1.text + '</div>' +
                                           /* '<div class="area-title fl">（132）</div>' +*/
                                            '<div class="area-title control unfold fl">收缩</div></div>'+
                                        '</div></div>';

                                    var Parent1_DomId = "#"+Parent1.domId+"l";
                                    var Parent2_DomId = "#"+Parent2.domId+"l";
                                    var Parent3_DomId = "#"+Parent3.domId+"l";

                                    var Parent1_DomId_class = "."+Parent1.domId+"_1";
                                    var Parent2_DomId_class = "."+Parent2.domId+"_2";
                                    var Parent3_DomId_class = "."+Parent3.domId+"_3";

                                    //插入省 例：广东省（88）收缩
                                    if($("#win").find(Parent3_DomId).length==0){
                                        var shengBox = '<div class="community community1 clearfix ' + Parent3.domId +"_3"+'"></div>';
                                        $("#win").find(".path-wrap").append(sheng);
                                        $("#win").find(Parent3_DomId).append(shengBox);
//
                                    }

                                    //插入省市 例：广东省>广州市（88）收缩
                                    if($("#win").find(Parent2_DomId).length==0){
                                        var shengshiBox = '<div class="community community2 clearfix ' + Parent2.domId +"_2"+'"></div>';
                                        $("#win").find(Parent3_DomId_class).append(shengshi);
                                        $("#win").find(Parent2_DomId).append(shengshiBox);
//
                                    }

                                    //插入省市区 例：广东省>广州市>天河区（55）收缩
                                    if($("#win").find(Parent1_DomId).length==0){
                                        var shengshiquBox = '<div class="community xiaoqu-name clearfix ' + Parent1.domId +"_1"+'"></div>';
                                        $("#win").find(Parent2_DomId_class).append(shengshiqu);
                                        $("#win").find(Parent1_DomId).append(shengshiquBox);
//
                                    }
                                    //插入小区 例：小区名称1  小区名称2  小区名称3
                                    for(var m=0;m<lelFourLength;m++){
                                        var communityId = lelFour[m].id;
                                        var communityDomId = lelFour[m].domId;
                                        var communityText = lelFour[m].text;


                                        var xiaoquming ='<div class="community-name fl" data-id="'+ communityId +'"id="'+ communityDomId + "m"   +'">'+ communityText+ '</div>';

                                        var nameid = "#"+communityDomId +"m";
                                        var lelFourChecked = lelFour[m].checked;
                                        if(lelFourChecked){
                                            if($("#win").find(nameid).length==0){
                                                $("#win").find(Parent1_DomId_class).append(xiaoquming);
                                            }
                                        }
                                        if(!lelFourChecked){
                                            if($("#win").find(nameid).length>0){
                                                $("#win").find(nameid).remove();
                                            }

                                        }
                                    }
//

                                }
                            }

                        }
                    }


                }
            }

        }
    }

    /* 点击删除右边，左边树形对应的节点取消选中 */
    cancelLeft();

    /* 点击右边的收缩查看--展开折叠效果（弹窗里） */
    quFoldAndUnfoldM();

    /*遍历右边 省市区没有，则移除父级-市；省市没有时，移除父级-省*/
    moveParent();


}

/* 删除右边，左边树形对应的节点取消选中 */
function cancelLeft(){
    //点省前的叉号
    $("#win").find(".path-delete3").on("click",function(){
        var wrap3 = $(this).parent().parent();
        var cancelCommunityName3 = wrap3.find(".community-name");
        var shengWrap = wrap3.find(".community2").children();

        cancelCommunityName3.each(function(){
            var dataId = $(this).attr("data-id");
            var cancelNode = $('#tree-box').tree('find', dataId);
            $("#tree-box").tree('uncheck', cancelNode.target);

        });

        wrap3.remove();
    });

    //点省市前的叉号
    $("#win").find(".path-delete2").on("click",function(){
        var wrap2 = $(this).parent().parent();
        var wrap2_parent = wrap2.parent().parent();
        var cancelCommunityName2 = wrap2.find(".community-name");

        cancelCommunityName2.each(function(){
            var dataId = $(this).attr("data-id");
            var cancelNode = $('#tree-box').tree('find', dataId);
            $("#tree-box").tree('uncheck', cancelNode.target);

        });

        wrap2.remove();
        var length2 = wrap2_parent.find(".path-box2").length;

        if(length2==0){
            wrap2_parent.remove();
        }


    });

    //点省市区前的叉号
    $("#win").find(".path-delete1").on("click",function(){
        var wrap1 = $(this).parent().parent();
        var wrap1_parent = wrap1.parent().parent();
        var wrap1_parent_shi = $(this).parents(".community1");
        var wrap1_parent_sheng = $(this).parents(".path-box3");

        var cancelCommunityName1 = wrap1.find(".community-name");

        cancelCommunityName1.each(function(){
            var dataId = $(this).attr("data-id");
            var cancelNode = $('#tree-box').tree('find', dataId);
            $("#tree-box").tree('uncheck', cancelNode.target);

        });
        var length1 = wrap1_parent.find(".path-box1").length;


        if(length1==0){
            wrap1_parent.remove();


        }
        var length2 = wrap1_parent_shi.children().length;
        if(length2==0){
            wrap1_parent_sheng.remove();
        }


    })
}

/* 点击右边的收缩查看--展开折叠效果（弹窗里） */
function quFoldAndUnfoldM(){
    var foldState1 = 1;
    var foldState2 = 1;
    var foldState3 = 1;
    //广东省  查看收缩效果
    $(".path3 .control").on("click",function(){

        var cancelCommunityName = $(this).parent().next(".community");
        if(foldState3){
            $(this).empty().html("查看");
            cancelCommunityName.hide();
            foldState3 = 0;
        }else{
            $(this).empty().html("收缩");
            cancelCommunityName.show();
            foldState3 = 1;
        }

    });

    //广东省>广州市  查看收缩效果
    $(".path2 .control").on("click",function(){

        var cancelCommunityName = $(this).parent().next(".community");
        if(foldState2){
            $(this).empty().html("查看");
            cancelCommunityName.hide();
            foldState2 = 0;
        }else{
            $(this).empty().html("收缩");
            cancelCommunityName.show();
            foldState2 = 1;
        }

    });

    //广东省>广州市>天河区  查看收缩效果
    $(".path1 .control").on("click",function(){

        var cancelCommunityName = $(this).parent().next(".community");
        if(foldState1){
            $(this).empty().html("查看");
            cancelCommunityName.hide();
            foldState1 = 0;
        }else{
            $(this).empty().html("收缩");
            cancelCommunityName.show();
            foldState1 = 1;
        }

    });
}

/*遍历右边 省市区、省市没有时，父级移除*/
function moveParent(){

    $("#win").find(".community2").each(function(){
        var length2 = $(this).children().length;
        if(length2==0){
            $(this).parents(".path-box2").remove();
        }
    });

    $("#win").find(".community1").each(function(){
        var length1 = $(this).children().length;
        if(length1==0){
            $(this).parents(".path-box3").remove();
        }
    });
}