Easyui tree扩展tree方法获取目标节点的一级子节点
项目中需要实现以下效果,点击左边tree,在右边显示小区,而且小区所属的区、市、省也要对应显示出来。
1、选中的节点,显示在右边区域
2、点击右边的收缩查看--展开折叠效果
3、遍历右边 省市区没有,则移除父级-市;省市没有时,移除父级-省
实现的代码如下
</span><span style="color: #0000ff;">var</span> tree = $("#tree-<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>");<span style="color: #008000;">//</span><span style="color: #008000;">树<a href="https://www.jb51.cc/tag/biaoqian/" target="_blank" class="keywords">标签</a></span>
<span style="color: #0000ff;">var</span> lelOne = tree.tree('getRoots');<span style="color: #008000;">//</span><span style="color: #008000;">一级节点(省)</span>
<span style="color: #0000ff;">var</span> lelOneLength =<span style="color: #000000;"> lelOne.length;
<span style="color: #008000;">//<span style="color: #008000;"> console.log(lelOne);<span style="color: #0000ff;">if(lelOneLength>0<span style="color: #000000;">){
<span style="color: #008000;">//<span style="color: #008000;">遍历一级节点
<span style="color: #0000ff;">for(<span style="color: #0000ff;">var i=0;i<lelOneLength;i++<span style="color: #000000;">){
<span style="color: #0000ff;">var lelTwo = tree.tree('getLeafChildren',lelOne[i].target);<span style="color: #008000;">//<span style="color: #008000;">二级节点(市)
<span style="color: #0000ff;">var lelTwoLength =<span style="color: #000000;"> lelTwo.length;
<span style="color: #008000;">//<span style="color: #008000;"> console.log(lelTwo);
<span style="color: #0000ff;">if(lelTwoLength>0<span style="color: #000000;">){
<span style="color: #008000;">//<span style="color: #008000;">遍历二级节点
<span style="color: #0000ff;">for(<span style="color: #0000ff;">var j=0;j<lelTwoLength;j++<span style="color: #000000;">){
<span style="color: #0000ff;">var lelTree = tree.tree('getLeafChildren',lelTwo[j].target);<span style="color: #008000;">//<span style="color: #008000;">三级节点(县、区)
<span style="color: #0000ff;">var lelTreeLength =<span style="color: #000000;"> lelTree.length;
<span style="color: #008000;">//<span style="color: #008000;"> console.log(lelTree);
<span style="color: #0000ff;">if(lelTreeLength>0<span style="color: #000000;">){
<span style="color: #008000;">//<span style="color: #008000;">遍历三级节点
<span style="color: #0000ff;">for(<span style="color: #0000ff;">var k=0;k<lelTreeLength;k++<span style="color: #000000;">){
<span style="color: #0000ff;">var lelFour = tree.tree('getLeafChildren',lelTree[k].target);<span style="color: #008000;">//<span style="color: #008000;">四级节点(小区)
<span style="color: #0000ff;">var lelFourLength =<span style="color: #000000;"> lelFour.length;
<span style="color: #0000ff;">var housecheck = 0<span style="color: #000000;">;
</span><span style="color: #0000ff;">if</span>(lelFourLength>0<span style="color: #000000;">){
</span><span style="color: #008000;">//</span><span style="color: #008000;">遍历四级节点,小区</span>
<span style="color: #0000ff;">for</span>(<span style="color: #0000ff;">var</span> m=0;m<lelFourLength;m++<span style="color: #000000;">){
</span><span style="color: #0000ff;">if</span><span style="color: #000000;">(lelFour[m].checked){
housecheck </span>= 1<span style="color: #000000;">;
}
}
</span><span style="color: #008000;">//</span><span style="color: #008000;">该县区没有小区被勾选</span>
<span style="color: #0000ff;">if</span>(housecheck==0<span style="color: #000000;">){
<span style="color: #008000;">//<span style="color: #008000;"> console.log(lelTree[k]);
<span style="color: #0000ff;">var Parent1_none = lelTree[k].domId; <span style="color: #008000;">//<span style="color: #008000;">父级(小区所在的县、区)
<span style="color: #0000ff;">var Parent1DomId_none = "#"+Parent1_none+"l"<span style="color: #000000;">;
<span style="color: #0000ff;">var Parent1DomId_none_children = "."+<span style="color: #000000;">Parent1_none;
<span style="color: #0000ff;">if($("#win").find(Parent1DomId_none).length>0<span style="color: #000000;">){
$("#win"<span style="color: #000000;">).find(Parent1DomId_none).remove();
$("#win"<span style="color: #000000;">).find(Parent1DomId_none_children).remove();
}
}
</span><span style="color: #008000;">//</span><span style="color: #008000;">该县区有小区被勾选</span>
<span style="color: #0000ff;">if</span>(housecheck==1<span style="color: #000000;">){
</span><span style="color: #0000ff;">var</span> Parent1 = tree.tree('getParent',lelFour[0].target);<span style="color: #008000;">//</span><span style="color: #008000;">父级(小区所在的县、区)</span>
<span style="color: #0000ff;">var</span> Parent2 = tree.tree('getParent',Parent1.target);<span style="color: #008000;">//</span><span style="color: #008000;">父级(小区所在的市)</span>
<span style="color: #0000ff;">var</span> Parent3 = tree.tree('getParent',Parent2.target);<span style="color: #008000;">//</span><span style="color: #008000;">父级(小区所在的省)</span>
<span style="color: #0000ff;">var</span> sheng = '<div class="path-<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a> path-<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>3" 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>' +
<span style="color: #008000;">/*</span><span style="color: #008000;">'<div class="area-title fl">(132)</div>' +</span><span style="color: #008000;">*/</span>
'<div class="area-title control unfold fl">收缩</div></div>'+
'</div></div>'<span style="color: #000000;">;
</span><span style="color: #0000ff;">var</span> shengshi = '<div class="path-<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a> path-<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>2" 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>' +
<span style="color: #008000;">/*</span><span style="color: #008000;">'<div class="area-title fl">(132)</div>' +</span><span style="color: #008000;">*/</span>
'<div class="area-title control unfold fl">收缩</div></div>'+
'</div></div>'<span style="color: #000000;">;
</span><span style="color: #0000ff;">var</span> shengshiqu = '<div class="path-<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a> path-<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>1" 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>' +
<span style="color: #008000;">/*</span><span style="color: #008000;"> '<div class="area-title fl">(132)</div>' +</span><span style="color: #008000;">*/</span>
'<div class="area-title control unfold fl">收缩</div></div>'+
'</div></div>'<span style="color: #000000;">;
</span><span style="color: #0000ff;">var</span> Parent1_DomId = "#"+Parent1.domId+"l"<span style="color: #000000;">;
</span><span style="color: #0000ff;">var</span> Parent2_DomId = "#"+Parent2.domId+"l"<span style="color: #000000;">;
</span><span style="color: #0000ff;">var</span> Parent3_DomId = "#"+Parent3.domId+"l"<span style="color: #000000;">;
</span><span style="color: #0000ff;">var</span> Parent1_DomId_class = "."+Parent1.domId+"_1"<span style="color: #000000;">;
</span><span style="color: #0000ff;">var</span> Parent2_DomId_class = "."+Parent2.domId+"_2"<span style="color: #000000;">;
</span><span style="color: #0000ff;">var</span> Parent3_DomId_class = "."+Parent3.domId+"_3"<span style="color: #000000;">;
</span><span style="color: #008000;">//</span><span style="color: #008000;">插入省 例:广东省(88)收缩</span>
<span style="color: #0000ff;">if</span>($("#win").find(Parent3_DomId).length==0<span style="color: #000000;">){
</span><span style="color: #0000ff;">var</span> sheng<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a> = '<div class="community community1 clearfix ' + Parent3.domId +"_3"+'"></div>'<span style="color: #000000;">;
$(</span>"#win").find(".path-wrap"<span style="color: #000000;">).append(sheng);
$(</span>"#win"<span style="color: #000000;">).find(Parent3_DomId).append(sheng<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>);
<span style="color: #008000;">//
<span style="color: #000000;"> }
</span><span style="color: #008000;">//</span><span style="color: #008000;">插入省市 例:广东省>广州市(88)收缩</span>
<span style="color: #0000ff;">if</span>($("#win").find(Parent2_DomId).length==0<span style="color: #000000;">){
</span><span style="color: #0000ff;">var</span> shengshi<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a> = '<div class="community community2 clearfix ' + Parent2.domId +"_2"+'"></div>'<span style="color: #000000;">;
$(</span>"#win"<span style="color: #000000;">).find(Parent3_DomId_class).append(shengshi);
$(</span>"#win"<span style="color: #000000;">).find(Parent2_DomId).append(shengshi<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>);
<span style="color: #008000;">//
<span style="color: #000000;"> }
</span><span style="color: #008000;">//</span><span style="color: #008000;">插入省市区 例:广东省>广州市>天河区(55)收缩</span>
<span style="color: #0000ff;">if</span>($("#win").find(Parent1_DomId).length==0<span style="color: #000000;">){
</span><span style="color: #0000ff;">var</span> shengshiqu<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a> = '<div class="community xiaoqu-name clearfix ' + Parent1.domId +"_1"+'"></div>'<span style="color: #000000;">;
$(</span>"#win"<span style="color: #000000;">).find(Parent2_DomId_class).append(shengshiqu);
$(</span>"#win"<span style="color: #000000;">).find(Parent1_DomId).append(shengshiqu<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>);
<span style="color: #008000;">//
<span style="color: #000000;"> }
<span style="color: #008000;">//<span style="color: #008000;">插入小区 例:小区名称1 小区名称2 小区名称3
<span style="color: #0000ff;">for(<span style="color: #0000ff;">var m=0;m<lelFourLength;m++<span style="color: #000000;">){
<span style="color: #0000ff;">var communityId =<span style="color: #000000;"> lelFour[m].id;
<span style="color: #0000ff;">var communityDomId =<span style="color: #000000;"> lelFour[m].domId;
<span style="color: #0000ff;">var communityText =<span style="color: #000000;"> lelFour[m].text;
</span><span style="color: #0000ff;">var</span> xiaoquming ='<div class="community-name fl" data-id="'+ communityId +'"id="'+ communityDomId + "m" +'">'+ communityText+ '</div>'<span style="color: #000000;">;
</span><span style="color: #0000ff;">var</span> nameid = "#"+communityDomId +"m"<span style="color: #000000;">;
</span><span style="color: #0000ff;">var</span> lelFourChecked =<span style="color: #000000;"> lelFour[m].checked;
</span><span style="color: #0000ff;">if</span><span style="color: #000000;">(lelFourChecked){
</span><span style="color: #0000ff;">if</span>($("#win").find(nameid).length==0<span style="color: #000000;">){
$(</span>"#win"<span style="color: #000000;">).find(Parent1_DomId_class).append(xiaoquming);
}
}
</span><span style="color: #0000ff;">if</span>(!<span style="color: #000000;">lelFourChecked){
</span><span style="color: #0000ff;">if</span>($("#win").find(nameid).length>0<span style="color: #000000;">){
$(</span>"#win"<span style="color: #000000;">).find(nameid).remove();
}
}
}
<span style="color: #008000;">//
<span style="color: #000000;">
}
}
}
}
}
}
}
}
</span><span style="color: #008000;">/*</span><span style="color: #008000;"> 点击<a href="https://www.jb51.cc/tag/shanchu/" target="_blank" class="keywords">删除</a>右边,左边树形对应的节点取消选中 </span><span style="color: #008000;">*/</span><span style="color: #000000;">
cancelLeft();
</span><span style="color: #008000;">/*</span><span style="color: #008000;"> 点击右边的收缩查看--展开折叠<a href="https://www.jb51.cc/tag/xiaoguo/" target="_blank" class="keywords">效果</a>(弹窗里) </span><span style="color: #008000;">*/</span><span style="color: #000000;">
quFoldAndUnfoldM();
</span><span style="color: #008000;">/*</span><span style="color: #008000;">遍历右边 省市区没有,则移除父级-市;省市没有时,移除父级-省</span><span style="color: #008000;">*/</span><span style="color: #000000;">
moveParent();
}
cancelCommunityName3.each(</span><span style="color: #0000ff;">function</span><span style="color: #000000;">(){
</span><span style="color: #0000ff;">var</span> dataId = $(<span style="color: #0000ff;">this</span>).attr("data-id"<span style="color: #000000;">);
</span><span style="color: #0000ff;">var</span> cancelNode = $('#tree-<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>').tree('find'<span style="color: #000000;">,dataId);
$(</span>"#tree-<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>").tree('uncheck'<span style="color: #000000;">,cancelNode.target);
});
wrap3.remove();
});
</span><span style="color: #008000;">//</span><span style="color: #008000;">点省市前的叉号</span>
$("#win").find(".path-delete2").on("click",<span style="color: #0000ff;">function</span><span style="color: #000000;">(){
</span><span style="color: #0000ff;">var</span> wrap2 = $(<span style="color: #0000ff;">this</span><span style="color: #000000;">).parent().parent();
</span><span style="color: #0000ff;">var</span> wrap2_parent =<span style="color: #000000;"> wrap2.parent().parent();
</span><span style="color: #0000ff;">var</span> cancelCommunityName2 = wrap2.find(".community-name"<span style="color: #000000;">);
cancelCommunityName2.each(</span><span style="color: #0000ff;">function</span><span style="color: #000000;">(){
</span><span style="color: #0000ff;">var</span> dataId = $(<span style="color: #0000ff;">this</span>).attr("data-id"<span style="color: #000000;">);
</span><span style="color: #0000ff;">var</span> cancelNode = $('#tree-<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>').tree('find'<span style="color: #000000;">,cancelNode.target);
});
wrap2.remove();
</span><span style="color: #0000ff;">var</span> length2 = wrap2_parent.find(".path-<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>2"<span style="color: #000000;">).length;
</span><span style="color: #0000ff;">if</span>(length2==0<span style="color: #000000;">){
wrap2_parent.remove();
}
});
</span><span style="color: #008000;">//</span><span style="color: #008000;">点省市区前的叉号</span>
$("#win").find(".path-delete1").on("click",<span style="color: #0000ff;">function</span><span style="color: #000000;">(){
</span><span style="color: #0000ff;">var</span> wrap1 = $(<span style="color: #0000ff;">this</span><span style="color: #000000;">).parent().parent();
</span><span style="color: #0000ff;">var</span> wrap1_parent =<span style="color: #000000;"> wrap1.parent().parent();
</span><span style="color: #0000ff;">var</span> wrap1_parent_shi = $(<span style="color: #0000ff;">this</span>).parents(".community1"<span style="color: #000000;">);
</span><span style="color: #0000ff;">var</span> wrap1_parent_sheng = $(<span style="color: #0000ff;">this</span>).parents(".path-<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>3"<span style="color: #000000;">);
</span><span style="color: #0000ff;">var</span> cancelCommunityName1 = wrap1.find(".community-name"<span style="color: #000000;">);
cancelCommunityName1.each(</span><span style="color: #0000ff;">function</span><span style="color: #000000;">(){
</span><span style="color: #0000ff;">var</span> dataId = $(<span style="color: #0000ff;">this</span>).attr("data-id"<span style="color: #000000;">);
</span><span style="color: #0000ff;">var</span> cancelNode = $('#tree-<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>').tree('find'<span style="color: #000000;">,cancelNode.target);
});
</span><span style="color: #0000ff;">var</span> length1 = wrap1_parent.find(".path-<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>1"<span style="color: #000000;">).length;
</span><span style="color: #0000ff;">if</span>(length1==0<span style="color: #000000;">){
wrap1_parent.remove();
}
</span><span style="color: #0000ff;">var</span> length2 =<span style="color: #000000;"> wrap1_parent_shi.children().length;
</span><span style="color: #0000ff;">if</span>(length2==0<span style="color: #000000;">){
wrap1_parent_sheng.remove();
}
})
}
</span><span style="color: #0000ff;">var</span> cancelCommunityName = $(<span style="color: #0000ff;">this</span>).parent().next(".community"<span style="color: #000000;">);
</span><span style="color: #0000ff;">if</span><span style="color: #000000;">(foldState3){
$(</span><span style="color: #0000ff;">this</span>).empty().html("查看"<span style="color: #000000;">);
cancelCommunityName.hide();
foldState3 </span>= 0<span style="color: #000000;">;
}</span><span style="color: #0000ff;">else</span><span style="color: #000000;">{
$(</span><span style="color: #0000ff;">this</span>).empty().html("收缩"<span style="color: #000000;">);
cancelCommunityName.show();
foldState3 </span>= 1<span style="color: #000000;">;
}
});
</span><span style="color: #008000;">//</span><span style="color: #008000;">广东省>广州市 查看收缩<a href="https://www.jb51.cc/tag/xiaoguo/" target="_blank" class="keywords">效果</a></span>
$(".path2 .control").on("click",<span style="color: #0000ff;">function</span><span style="color: #000000;">(){
</span><span style="color: #0000ff;">var</span> cancelCommunityName = $(<span style="color: #0000ff;">this</span>).parent().next(".community"<span style="color: #000000;">);
</span><span style="color: #0000ff;">if</span><span style="color: #000000;">(foldState2){
$(</span><span style="color: #0000ff;">this</span>).empty().html("查看"<span style="color: #000000;">);
cancelCommunityName.hide();
foldState2 </span>= 0<span style="color: #000000;">;
}</span><span style="color: #0000ff;">else</span><span style="color: #000000;">{
$(</span><span style="color: #0000ff;">this</span>).empty().html("收缩"<span style="color: #000000;">);
cancelCommunityName.show();
foldState2 </span>= 1<span style="color: #000000;">;
}
});
</span><span style="color: #008000;">//</span><span style="color: #008000;">广东省>广州市>天河区 查看收缩<a href="https://www.jb51.cc/tag/xiaoguo/" target="_blank" class="keywords">效果</a></span>
$(".path1 .control").on("click",<span style="color: #0000ff;">function</span><span style="color: #000000;">(){
</span><span style="color: #0000ff;">var</span> cancelCommunityName = $(<span style="color: #0000ff;">this</span>).parent().next(".community"<span style="color: #000000;">);
</span><span style="color: #0000ff;">if</span><span style="color: #000000;">(foldState1){
$(</span><span style="color: #0000ff;">this</span>).empty().html("查看"<span style="color: #000000;">);
cancelCommunityName.hide();
foldState1 </span>= 0<span style="color: #000000;">;
}</span><span style="color: #0000ff;">else</span><span style="color: #000000;">{
$(</span><span style="color: #0000ff;">this</span>).empty().html("收缩"<span style="color: #000000;">);
cancelCommunityName.show();
foldState1 </span>= 1<span style="color: #000000;">;
}
});
}
$(</span>"#win").find(".community2").each(<span style="color: #0000ff;">function</span><span style="color: #000000;">(){
</span><span style="color: #0000ff;">var</span> length2 = $(<span style="color: #0000ff;">this</span><span style="color: #000000;">).children().length;
</span><span style="color: #0000ff;">if</span>(length2==0<span style="color: #000000;">){
$(</span><span style="color: #0000ff;">this</span>).parents(".path-<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>2"<span style="color: #000000;">).remove();
}
});
$(</span>"#win").find(".community1").each(<span style="color: #0000ff;">function</span><span style="color: #000000;">(){
</span><span style="color: #0000ff;">var</span> length1 = $(<span style="color: #0000ff;">this</span><span style="color: #000000;">).children().length;
</span><span style="color: #0000ff;">if</span>(length1==0<span style="color: #000000;">){
$(</span><span style="color: #0000ff;">this</span>).parents(".path-<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>3"<span style="color: #000000;">).remove();
}
});
}
原文链接:https://www.f2er.com/jquery/403435.html