jQuery中zTree搜索怎么实现(jquery,ztree,开发技术)

关于树节点

　　要完成上述流程中各种方法，我们需要知道树节点的一系列属性，我们都知道有api这种神器，然而api有一个特点就是齐全（齐全得我们想精确的找到某一个属性或者方法时可能得一顿好找），这里我们想要的是如何快速得到自己想要的属性或者方法，我们在控制台打印出树节点集合:　

vartreeObj=$.fn.zTree.getZTreeObj("homeTree");//设置根节点varnode=treeObj.getNodes();//获取根节点varnodes=treeObj.transformToArray(node);//获取所有节点console.log(nodes);

　　看图：我们能看到所有节点，其中有id，name等各种属性

　　再看图：我们能看到任意节点的各种属性，有我们想要的子节点集合 childern,父节点属性 isParent ,节点id tId，父节点id parentTid...

万事俱备，动手

　　下面看一下相关方法，很多小细节需要在真正编码过程中才能发现，这里为了方便展示就直接列举方法了。

　　声明备用数组：

//地区搜索varparentArray=[];varchildArray=[];

　　递归获取目标节点父节点集合：

//递归获取目标节点所有父节点functiongetParentsNode(treeNode){varthisParentNode=treeNode.getParentNode();//得到该节点的父节点if(thisParentNode!=null){//父节点存在parentArray.push(thisParentNode);//储存至数组getParentsNode(thisParentNode);//重调}else{returnfalse;}}

　　递归获取目标节点子节点集合：

//递归获取目标节点所有子节点functiongetChildrenNode(treeNode){varthisIsParent=treeNode.isParent;//获取目标节点isParent属性，判断是否为父节点if(thisIsParent==true){varthisChildrenNode=treeNode.children;//得到该节点的子节点集合for(vari=0;i<thisChildrenNode.length;i++){childArray.push(thisChildrenNode[i]);//将该子节点加入数组中getChildrenNode(thisChildrenNode[i]);//重调}}else{returnfalse;}}

　　这里建议将匹配节点部分摘出来单独写一个方法，方便进行拓展匹配规则，这里我们假设除了匹配name还需要匹配节点的 entity_code 属性：

//匹配节点functionmatchNode(treeNode,num){varinputArea=$("input[name='searchArea']");varname=treeNode.name;varentityCode=treeNode.entity_code||'';varval=inputArea.val();//获取检索值varnumName=name.indexOf(val);varnumCode=entityCode.indexOf(val);varnum=-1;if(numName!=-1||numCode!=-1){num=1;}if(numName==-1&&numCode==-1){num=-1;}returnnum;}

　　节点匹配成功方法：

//节点匹配成功functioncheckTrueArray(arr,treeNode){varthisTid=treeNode.tId;varthisLi=$("#"+thisTid);for(varn=0;n<arr.length;n++){varthisNodeId=arr[n].tId;varthisNodeLi=$("#"+thisNodeId);thisLi.show();thisNodeLi.show();}}

　　节点匹配失败方法：

//节点匹配失败functioncheckFalseArray(arr,treeNode){varresult=[];varresult2=[];varthisTid=treeNode.tId;varthisLi=$("#"+thisTid);varval=inputArea.val();//获取检索值varthisParent=treeNode.getParentNode();//获取目标节点父节点if(thisParent!=null){//有父节点varthisBrotherArr=treeNode.getParentNode().children;//得到包含自身的兄弟数组for(varm=0;m<arr.length;m++){//匹配父节点varnum=matchNode(arr[m]);if(num!=-1){result.push(arr[m]);}}varresultLength=result.length;for(varm=0;m<thisBrotherArr.length;m++){//匹配兄弟节点varnum=matchNode(thisBrotherArr[m]);if(num!=-1){result2.push(thisBrotherArr[m]);}}varresultLength3=result2.length;//对于自身匹配失败的节点，要显示必须满足有父节点匹配成功，且兄弟级节点都匹配失败if((resultLength==0&&resultLength3==0)||resultLength3!=0){thisLi.hide();}if(resultLength!=0&&resultLength3==0){thisLi.show();}}else{thisLi.hide();}}

　　 目标节点匹配失败 目标节点即有父节点又有子节点：

//目标节点匹配失败目标节点即有父节点又有子节点functioncheckAllArray(arr,arr2,treeNode){varresult=[];varresult2=[];varthisTid=treeNode.tId;varthisLi=$("#"+thisTid);varval=inputArea.val();//获取检索值for(varm=0;m<arr.length;m++){//匹配子节点或父节点varnum=matchNode(arr[m]);if(num!=-1){result.push(arr[m]);//匹配成功储存至数组}}varresultLength=result.length;//获取匹配成功后返回的数组长度for(varm=0;m<arr2.length;m++){//匹配子节点或父节点varnum=matchNode(arr2[m]);if(num!=-1){result2.push(arr2[m]);//匹配成功储存至数组}}varresultLength3=result2.length;//获取匹配成功后返回的数组长度if(resultLength==0&&resultLength3==0){//子节点和父节点都匹配失败thisLi.hide();}else{thisLi.show();//有一种匹配成功或都匹配成功}}

　　定义搜索方法：

functionsearchArea(treeId,treeNode){//定义搜索方法varinputArea=$("input[name='searchArea']");varval=inputArea.val();//获取检索值vartreeObj=$.fn.zTree.getZTreeObj("homeTree");//设置根节点varnode=treeObj.getNodes();//获取根节点varnodes=treeObj.transformToArray(node);//获取所有节点console.log(nodes);for(vari=0;i<nodes.length;i++){varthisNodePid=nodes[i].pId;varthisParentNode=parentArray=[];childArray=[];getParentsNode(nodes[i]);//获取目标节点所有父节点返回数组getChildrenNode(nodes[i]);//获取目标节点所有子节点返回数组varnum=matchNode(nodes[i]);if(nodes[i].isParent==false){if(num!=-1){checkTrueArray(parentArray,nodes[i]);}else{checkFalseArray(parentArray,nodes[i]);}}if(nodes[i].isParent==true){if(num!=-1){checkTrueArray(parentArray,nodes[i]);checkTrueArray(childArray,nodes[i]);}else{checkAllArray(parentArray,childArray,nodes[i]);}}}}

　　调用搜索方法：

//调用搜索方法$(".searchAreaBtn").click(function(treeId,treeNode){searchArea(treeId,treeNode);});varinputArea=$("input[name='searchArea']");inputArea.keyup(function(treeId,treeNode,e){vare=event||window.event;varval=inputArea.val();if(e.keyCode==13||val==""){searchArea(treeId,treeNode);}});

　　看效果