這篇文章主要為大家展示了“jQuery中zTree搜索的示例分析”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學習一下“jQuery中zTree搜索的示例分析”這篇文章吧。

創(chuàng)新互聯(lián)公司堅持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站設(shè)計、做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時代的鄲城網(wǎng)站設(shè)計、移動媒體設(shè)計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

思維導圖

一般搜索功能只是在“既定范圍內(nèi)（方便稱呼）”匹配關(guān)鍵字，“既定范圍”即我們已經(jīng)知道搜索的范圍：比如說一個文本庫，一個下拉框，換而言之我們匹配的對象集大小已經(jīng)確定了。然而這一點在ztree上不可行，為什么呢？在我考慮了一下ztree搜索功能實現(xiàn)邏輯的時候問了一句：那啥，這棵樹的層級是固定的嗎？還是說不確定有多少層？老哥看著我會心一笑：你按無限層來寫~小生小腿肚子一抽。。因為樹的層級不確定，所以搜索范圍不確定，舉個栗子：目標節(jié)點匹配成功，如果這個節(jié)點是子節(jié)點，那么它的父節(jié)點也應(yīng)該是顯示的，然后它父節(jié)點的父節(jié)點也應(yīng)該是顯示的，然后它父節(jié)點的父節(jié)點的父節(jié)點的...Orz...這仿佛永遠寫不到盡頭了...沒辦法，只能：遞歸，找到目標節(jié)點的所有父節(jié)點和子節(jié)點。

邏輯關(guān)鍵點

在上面的思維導圖中我大致列出了邏輯，目標節(jié)點在什么情況下顯示，什么情況下隱藏，這是我們必須清楚的關(guān)鍵點，下面我們具體看下目標節(jié)點存在的情況：

到了這里，相信對于如何實現(xiàn)滿足我們需求的搜索功能開發(fā)，已經(jīng)能做到了然于心了，剩下的只是實現(xiàn)的方法，然而這完全不是事~（小生竊以為真正讓人憂心的理不清功能的流程，至于實現(xiàn)方法你們都懂的吧？0.0..）

關(guān)于樹節(jié)點

要完成上述流程中各種方法，我們需要知道樹節(jié)點的一系列屬性，我們都知道有api這種神器，然而api有一個特點就是齊全（齊全得我們想精確的找到某一個屬性或者方法時可能得一頓好找），這里我們想要的是如何快速得到自己想要的屬性或者方法，我們在控制臺打印出樹節(jié)點集合:　

 var treeObj=$.fn.zTree.getZTreeObj("homeTree"); // 設(shè)置根節(jié)點
  var node = treeObj.getNodes(); // 獲取根節(jié)點
  var nodes = treeObj.transformToArray(node); // 獲取所有節(jié)點
  console.log(nodes);

 　　看圖：我們能看到所有節(jié)點，其中有id，name等各種屬性

再看圖：我們能看到任意節(jié)點的各種屬性，有我們想要的子節(jié)點集合 childern,父節(jié)點屬性 isParent ,節(jié)點id tId，父節(jié)點id parentTid...

萬事俱備，動手

下面看一下相關(guān)方法，很多小細節(jié)需要在真正編碼過程中才能發(fā)現(xiàn)，這里為了方便展示就直接列舉方法了。

聲明備用數(shù)組：

// 地區(qū)搜索
 var parentArray = [];
 var childArray = [];

 　　遞歸獲取目標節(jié)點父節(jié)點集合：

 // 遞歸獲取目標節(jié)點所有父節(jié)點
 function getParentsNode(treeNode){
  var thisParentNode = treeNode.getParentNode(); //得到該節(jié)點的父節(jié)點
  if( thisParentNode != null ){ // 父節(jié)點存在
   parentArray.push(thisParentNode); // 儲存至數(shù)組
   getParentsNode(thisParentNode); // 重調(diào) 
  }else{
   return false;
  }   
 }

 　　遞歸獲取目標節(jié)點子節(jié)點集合：

 // 遞歸獲取目標節(jié)點所有子節(jié)點
 function getChildrenNode(treeNode){
  var thisIsParent = treeNode.isParent; // 獲取目標節(jié)點 isParent 屬性，判斷是否為父節(jié)點
  if( thisIsParent == true ){
   var thisChildrenNode = treeNode.children; // 得到該節(jié)點的子節(jié)點集合
   for(var i=0;i
 　　這里建議將匹配節(jié)點部分摘出來單獨寫一個方法，方便進行拓展匹配規(guī)則，這里我們假設(shè)除了匹配name還需要匹配節(jié)點的 entity_code 屬性：
 //匹配節(jié)點
 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;
 }
 　　節(jié)點匹配成功方法：
 // 節(jié)點匹配成功
 function checkTrueArray(arr,treeNode){
  var thisTid = treeNode.tId;
  var thisLi = $("#"+thisTid);
  for(var n=0;n
 　　節(jié)點匹配失敗方法：
 // 節(jié)點匹配失敗
 function checkFalseArray(arr,treeNode){
  var result = [];
  var result2 = [];
  var thisTid = treeNode.tId;
  var thisLi = $("#"+thisTid);
  var val = inputArea.val(); // 獲取檢索值
  var thisParent = treeNode.getParentNode(); // 獲取目標節(jié)點父節(jié)點
  if( thisParent != null ){ // 有父節(jié)點
   var thisBrotherArr = treeNode.getParentNode().children; // 得到包含自身的兄弟數(shù)組
   for(var m=0;m
 　　 目標節(jié)點匹配失敗 目標節(jié)點即有父節(jié)點又有子節(jié)點：
 // 目標節(jié)點匹配失敗 目標節(jié)點即有父節(jié)點又有子節(jié)點
 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"); // 設(shè)置根節(jié)點
  var node = treeObj.getNodes(); // 獲取根節(jié)點
  var nodes = treeObj.transformToArray(node); // 獲取所有節(jié)點
  console.log(nodes);
  for(var i=0;i
調(diào)用搜索方法：
 // 調(diào)用搜索方法
 $(".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出問題了，用美圖秀秀拼的圖~囧...）：
以上是“jQuery中zTree搜索的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
            
            
                        

            新聞標題：jQuery中zTree搜索的示例分析            

            本文路徑：http://weahome.cn/article/ijhgse.html