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 0){ //遍历二级节点 for(var j=0;j 0){ //遍历三级节点 for(var k=0;k 0){ //遍历四级节点，小区 for(var m=0;m 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 = ' ' + ' ' + ' ' + ' ' + Parent3.text + ' ' + /*' （132） ' +*/ ' 收缩 '+ ' '; var shengshi = ' ' + ' ' + ' ' + ' ' + Parent3.text + ' ' + ' > ' + ' ' + Parent2.text + ' ' + /*' （132） ' +*/ ' 收缩 '+ ' '; var shengshiqu = ' ' + ' ' + ' ' + ' ' + Parent3.text + ' ' + ' > ' + ' ' + Parent2.text + ' ' + ' > ' + ' ' + Parent1.text + ' ' + /* ' （132） ' +*/ ' 收缩 '+ ' '; 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 = ' '; $("#win").find(".path-wrap").append(sheng); $("#win").find(Parent3_DomId).append(shengBox);// } //插入省市 例：广东省>广州市（88）收缩 if($("#win").find(Parent2_DomId).length==0){ var shengshiBox = ' '; $("#win").find(Parent3_DomId_class).append(shengshi); $("#win").find(Parent2_DomId).append(shengshiBox);// } //插入省市区 例：广东省>广州市>天河区（55）收缩 if($("#win").find(Parent1_DomId).length==0){ var shengshiquBox = ' '; $("#win").find(Parent2_DomId_class).append(shengshiqu); $("#win").find(Parent1_DomId).append(shengshiquBox);// } //插入小区 例：小区名称1 小区名称2 小区名称3 for(var m=0;m '+ communityText+ ''; 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(); } });}