//匹配节点 function matchNode(treeNode,num){ var inputArea = $("input[name='searchArea']"); var name = treeNode.name; var entityCode = treeNode.entity_code|| ''; var val = inputArea.val(); // 获取检索值 var numName = name.indexOf(val); var numCode = entityCode.indexOf(val); var num = -1; if( numName != -1 || numCode !=-1 ){ num = 1; } if( numName == -1 && numCode == -1 ){ num = -1; } return num; }
节点匹配成功方法：
// 节点匹配成功 function checkTrueArray(arr,treeNode){ var thisTid = treeNode.tId; var thisLi = $("#"+thisTid); for(var n=0;n<arr.length;n++){ var thisNodeId = arr[n].tId; var thisNodeLi = $("#"+thisNodeId); thisLi.show(); thisNodeLi.show(); } }
节点匹配失败方法：
// 节点匹配失败 function checkFalseArray(arr,treeNode){ var result = []; var result2 = []; var thisTid = treeNode.tId; var thisLi = $("#"+thisTid); var val = inputArea.val(); // 获取检索值 var thisParent = treeNode.getParentNode(); // 获取目标节点父节点 if( thisParent != null ){ // 有父节点 var thisBrotherArr = treeNode.getParentNode().children; // 得到包含自身的兄弟数组 for(var m=0;m<arr.length;m++){ // 匹配父节点 var num = matchNode(arr[m]); if( num != -1 ){ result.push(arr[m]); } } var resultLength = result.length; for( var m=0;m<thisBrotherArr.length;m++ ){ // 匹配兄弟节点 var num = matchNode(thisBrotherArr[m]); if( num != -1 ){ result2.push(thisBrotherArr[m]); } } var resultLength2 = result2.length; // 对于自身匹配失败的节点，要显示必须满足有父节点匹配成功，且兄弟级节点都匹配失败 if( (resultLength == 0 && resultLength2 == 0) || resultLength2 != 0 ){ thisLi.hide(); } if( resultLength !=0 && resultLength2 == 0 ){ thisLi.show(); } }else{ thisLi.hide(); } }
目标节点匹配失败 目标节点即有父节点又有子节点：
// 目标节点匹配失败 目标节点即有父节点又有子节点 function checkAllArray(arr,arr2,treeNode){ var result = []; var result2 = []; var thisTid = treeNode.tId; var thisLi = $("#"+thisTid); var val = inputArea.val(); // 获取检索值 for(var m=0;m<arr.length;m++){ // 匹配子节点或父节点 var num = matchNode(arr[m]); if( num != -1 ){ result.push(arr[m]); // 匹配成功储存至数组 } } var resultLength = result.length; // 获取匹配成功后返回的数组长度 for(var m=0;m<arr2.length;m++){ // 匹配子节点或父节点 var num = matchNode(arr2[m]); if( num != -1 ){ result2.push(arr2[m]); // 匹配成功储存至数组 } } var resultLength2 = result2.length; // 获取匹配成功后返回的数组长度 if( resultLength == 0 && resultLength2 == 0 ){ // 子节点和父节点都匹配失败 thisLi.hide(); }else{ thisLi.show(); // 有一种匹配成功或都匹配成功 } }
定义搜索方法：
function searchArea(treeId, treeNode){ // 定义搜索方法 var inputArea = $("input[name='searchArea']"); var val = inputArea.val(); // 获取检索值 var treeObj=$.fn.zTree.getZTreeObj("homeTree"); // 设置根节点 var node = treeObj.getNodes(); // 获取根节点 var nodes = treeObj.transformToArray(node); // 获取所有节点 console.log(nodes); for(var i=0;i<nodes.length;i++){ var thisNodePid = nodes[i].pId; var thisParentNode = parentArray = []; childArray = []; getParentsNode(nodes[i]); // 获取目标节点所有父节点 返回数组 getChildrenNode(nodes[i]); // 获取目标节点所有子节点 返回数组 var num = 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); }); var inputArea = $("input[name='searchArea']"); inputArea.keyup(function(treeId, treeNode,e){ var e = event || window.event; var val = inputArea.val(); if( e.keyCode == 13 || val == "" ){ searchArea(treeId, treeNode); } });
看效果（电脑ps出问题了，用美图秀秀拼的图~囧...）：
结语
理论上来说应该是能支持无限层的，最多试了四层，没有问题，没有做更多测试，有兴趣的看官可以试试，需要demo的可以留言，互相学习，一起进步，么么哒~
总结