jQuery zTree搜索-关键词查询递归无限层函数实现代码

唠叨，嗯

前两天朋友跟我说想要一个ztree搜索功能，我突然拍了一下：这个方法是不是还少做了无数前辈？自己找吧，我很忙~然后就默默蹲下来写zTree的搜索方法。为什么呢？因为我说：“不可能找到。肯定有很多人已经做了无数的事情。如果找不到，我就写给你，请你吃午饭。”可是，找了很久却找不到(泪崩，我的计划，我的午餐~)。大部分都是使用getNodesByParamFuzzy()或者在API中高亮显示。但是，朋友说要求没有达到：1。匹配失败的父节点也被隐藏；2.您可以自定义匹配规则，也就是说，您可以匹配名称和属性.(反正我要的不是辣，小生脸上笑，心里乐.那我给你写~)，并在下面输入文字：

思维导图

一般的搜索功能只匹配“集合范围”内的关键词，这意味着我们已经知道了搜索范围：比如一个文本库和一个下拉框，换句话说，我们匹配的对象集合的大小已经确定了。然而，这在ztree上不可行。为什么呢？当我想到ztree搜索函数的实现逻辑时，我问：嗯，这个树的层次是固定的吗？还是不确定有几层？哥哥看我的时候会笑：你按无限层写~小学生有小腿抽。因为树的层次结构是不确定的，所以搜索范围是不确定的。例如，目标节点成功匹配。如果此节点是子节点，则还应该显示其父节点，然后还应该显示其父节点，然后显示其父节点的父节点的父节点.下跪.似乎永远写不完.除了递归查找目标节点的所有父节点和子节点之外，没有其他方法

逻辑要点

在上面的思维导图中，我大致列出了逻辑，以及目标节点在什么情况下显示和隐藏。这是我们必须明确的重点。让我们具体看看目标节点的存在：

到了这里，相信大家已经可以知道如何实现符合自己需求的搜索功能开发了，剩下的只是实现方法，但这根本不是一件事~(萧声暗自认为，梳理功能流程真的很令人担忧，至于实现方法，大家都知道吗？0.0.)

关于树节点

为了完成上述过程中的各种方法，我们需要知道树节点的一系列属性，我们都知道有一个类似api的工件。但是，api有一个特性是完整的(当我们想要准确地找到某个属性或方法时，我们可能必须找到一个好的工作)。这里我们想要的是如何快速得到我们想要的属性或者方法。我们在控制台上打印出树节点集合：

var treeObj=$ . fn . ztree . getztreeObj(' HomeTree ')；//设置根节点var node=treeObj . getnodes()；//获取根节点varnodes=treeobj.transform到array(node)；//获取所有节点的console . log(nodes)；看图：我们可以看到所有的节点，包括id、名称等属性

再看图：我们可以看到任意节点的各种属性，包括子节点集childern、父节点属性isParent、节点id tId、父节点id parentTid。

一切都准备好了，做吧

我们来看看相关的方法。许多小细节需要在真正的编码过程中发现。在这里，为了方便演示，我们将直接列出方法。

声明备用数组：

//区域搜索varparenteraray=[]；var child array=[]；递归获取目标节点的父节点集：

//递归获取目标节点函数get parentnode (treenode)的所有父节点{ var this parent node=tree node . getparent node()；//获取父节点if(thisParentNode！=null ){ //ParentArray。父节点中存在Push(此父节点)；//保存到数组getParentsNode(this parentnode)；//reset } else { return false；}}递归获取目标节点的子节点集：

//递归获取目标节点所有子节点函数getchildren节点(树节点){ var thisty parent=树节点。isparent//获取目标节点顶级类别属性，判断是否为父节点if(这个父节点==true){ var这个子节点=树节点。儿童；//得到该节点的子节点集合for(var I=0；长度；I){子数组。推(此子节点[I])；//将该子节点加入数组中getchildren节点(thichildren节点[I])；//重调} } else {返回false} }这里建议将匹配节点部分摘出来单独写一个方法，方便进行拓展匹配规则，这里我们假设除了匹配名字还需要匹配节点的实体代码属性：

//匹配节点函数matchNode(treeNode，num){ var inputArea=$(' input[name=' search area ']')；var name=tree node . name var entity code=tree node。entity _ code | |var val=InputArea。val()；//获取检索值var NumName=name。index of(val)；var NumCode=EntityCode。index of(val)；var num=-1；if(numName！=-1 || numCode！=-1){ num=1；} if(NumName==-1 NumCode==-1){ num=-1；}返回num}节点匹配成功方法：

//节点匹配成功函数checkTrueArray(arr，TreeNode){ var thisTid=TreeNode。TiDvar this Li=$(' # ' this id)；for(var n=0；narr . length n){ var thinodeid=arr[n].tid var this nodeli=$(' # ' this nodeid)；这个李。show()；thinodeli。show()；} }节点匹配失败方法：

//节点匹配失败函数checkfalsaray(arr，TreeNode){ var result=[]；var结果2=[]；var this id=treenode . tivar this Li=$(' # ' this id)；var val=InputArea。val()；//获取检索值var this parent=treenode。getparent node()；//获取目标节点父节点if(this ParaMeter！=null ){ //有父节点var thistbrotherrarr=treenode。getparentnode().儿童；//得到包含自身的兄弟数组for(var m=0；marr.lengthm ){ //匹配父节点var num=匹配节点(arr[m])；if(num！=-1){结果。推动(arr[m])；} } var结果长度=结果。长度；for(var m=0；mthisbrotherrarr。长度；m ){ //匹配兄弟节点var num=匹配节点(thistbrotherer[m])；if(num！=-1){结果2。推(这个兄弟[m])；} } var结果长度2=结果2。长度；//对于自身匹配失败的节点，要显示必须满足有父节点匹配成功，且兄弟级节点都匹配失败if(结果长度==0结果长度2==0) ||结果长度2!=0){这个李。hide()；} if(resultLength！=0结果长度2==0){这个李。show()；} }人家{这个李。hide()；} } 目标节点匹配失败目标节点即有父节点又有子节点：

//目标节点匹配失败目标节点即有父节点又有子节点函数checkAllArray(arr，arr2，tree node){ var result=[]；var结果2=[]；var this id=treenode . tivar this Li=$(' # ' this id)；var val=InputArea。val()；//获取检索值for(var m=0；marr.lengthm ){ //匹配子节点或父节点var num=匹配节点(arr[m])；if(num！=-1){结果。推动(arr[m])；//匹配成功储存至数组} } var结果长度=结果。长度；//获取匹配成功后返回的数组长度for(var m=0；marr2。长度；m ){ //匹配子节点或父节点var num=匹配节点(arr 2[m])；if(num！=-1){结果2。推动(arr 2[m])；//匹配成功储存至数组} } var结果长度2=结果2。长度；//获取匹配成功后返回的数组长度如果(结果长度==0结果长度2==0 ){ //子节点和父节点都匹配失败这个李。hide()；}目不斜视{这个李。show()；//有一种匹配成功或都匹配成功} }定义搜索方法：

函数searchArea(treeId，treeNode){ //定义搜索方法var inputArea=$(' input[name=' search area ']')；var val=InputArea。val()；//获取检索值var treeObj=$。fn。ztree。getztreeObj(' HomeTree ')；//设置根节点var node=TreeObj。GetNodes()；//获取根节点var nodes=TreeObj。transformToarray(节点);//获取所有节点console.log(节点);for(var I=0；索引节点长度；i ){ var thisNodePid=nodes[i].pIdvar此父节点=父数组=[]；子数组=[]；getParentsNode(节点[I])；//获取目标节点所有父节点返回数组getchildren节点(节点[I])；//获取目标节点所有子节点返回数组var num=匹配节点(nodes[I])；如果(节点[i].isParent==false ){ if(num！=-1){ CheckTrueArray(ParentArray，nodes[I])；} else { checkfalsaray(ParentArray，nodes[I])；} } if(节点[i].isParent==true ){ if(num！=-1){ CheckTrueArray(ParentArray，nodes[I])；checkTrueArray(childArray，nodes[I])；} else { checkAllArray(parentArray，childArray，nodes[I])；} } } }调用搜索方法：

//调用搜索方法$('.searcharebtn ').点击（函数(treeId，treeNode){ searchArea(treeId，tree node)；});var inputArea=$(' input[name=' search area ']')；输入tarea。向上键(函数(treeId，treeNode，e){ var e=event | | window。事件；var val=InputArea。val()；if(e . key code==13 | | val==' '){搜索区域(treeId，treeNode)；} });看效果（电脑著名图象处理软件出问题了，用美图秀秀拼的图~囧.):

结语

理论上来说应该是能支持无限层的，最多试了四层，没有问题，没有做更多测试，有兴趣的看官可以试试，需要演示的可以留言，互相学习，一起进步，么么哒~

总结

以上所述是小编给大家介绍的jQuery zTree搜索-关键字查询递归无限层功能实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！