jQuery中zTree搜索怎么实现

本篇内容介绍了"jQuery中zTree搜索怎么实现"的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

关于树节点

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

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

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

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

万事俱备，动手

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

　　声明备用数组：

// 地区搜索 var parentArray = []; var childArray = [];

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

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

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

 // 递归获取目标节点所有子节点 function getChildrenNode(treeNode){  var thisIsParent = treeNode.isParent; // 获取目标节点 isParent 属性，判断是否为父节点  if( thisIsParent == true ){   var thisChildrenNode = treeNode.children; // 得到该节点的子节点集合   for(var i=0;i
　　这里建议将匹配节点部分摘出来单独写一个方法，方便进行拓展匹配规则，这里我们假设除了匹配name还需要匹配节点的 entity_code 属性：
 //匹配节点 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
　　节点匹配失败方法：
 // 节点匹配失败 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
　　 目标节点匹配失败 目标节点即有父节点又有子节点：
 // 目标节点匹配失败 目标节点即有父节点又有子节点 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
　　定义搜索方法：
 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
　　调用搜索方法：
 // 调用搜索方法 $(".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);  } });
　　看效果
"jQuery中zTree搜索怎么实现"的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注网站，小编将为大家输出更多高质量的实用文章！