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();
        }
    });
}