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">></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">></div>' + '<div class="area-title fl">' + Parent2.text + '</div>' + '<div class="area-title fl">></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(); } }); }