ztree根據關鍵字模糊搜索


<!-- jquery包,ztree依賴jquery --> 
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>

<!-- ztree核心包,ztree核心功能 -->    
<script type="text/javascript" src="jquery.ztree.core-3.5.min.js"></script>

<!-- ztree exhide包,ztree隱藏顯示結點需要此包支持 -->   
<script type="text/javascript" src="jquery.ztree.exhide-3.5.min.js"></script>

html頁面結構:

<div class="container">
        <div class="search-bar">
            <input id="keyword" type="text" placeholder="請輸入...">
            <button id="search">搜索</button>
        </div>
        <div class="content">
            <!-- 用於顯示ztree的html元素的class一定要設置為ztree-->
            <ul id="ztreeObj" class="ztree"></ul>
        </div>
    </div>

s核心代碼

 對於一個結點,它是否需要顯示,不僅僅只看它是否包含搜索關鍵字,還需要看它的父結點和子結點是否包含關鍵字,只有當父結點和子結點都不包含搜索關鍵字,該結點才需要隱藏

//樹形查詢
    $('#search').click(function(){
        var ztreeObj = $.fn.zTree.getZTreeObj("ztreeObj");
        var keyword=$("#keyword").val();
        searchZtree(ztreeObj,keyword)
    });
//ztree查詢
var hiddenNodes = [];
function searchZtree(ztreeObj,ztreeInput){
  //顯示上次搜索后隱藏的結點
  ztreeObj.showNodes(hiddenNodes);
  function filterFunc(node){
      var keyword=ztreeInput;
      //如果當前結點,或者其父結點可以找到,或者當前結點的子結點可以找到,則該結點不隱藏
      if(searchParent(keyword,node) || searchChildren(keyword,node.children)){
          return false;
      }
      return true;
  };

  //獲取不符合條件的葉子結點
  hiddenNodes=ztreeObj.getNodesByFilter(filterFunc);

  //隱藏不符合條件的葉子結點
  ztreeObj.hideNodes(hiddenNodes);
}


/**
 * 查找子結點,如果找到,返回true,否則返回false-----ztree查詢時使用
 */
function searchChildren(keyword,children){
  if(children == null || children.length == 0){
      return false;
  }
  for(var i = 0;i < children.length;i++){
      var node = children[i];
      if(node.name.indexOf(keyword)!=-1){
          return true;
      }
      //遞歸查找子結點
      var result = searchChildren(keyword,node.children);
      if(result){
          return true;
      }
  }
  return false;
}

/**
 * 查找當前結點和父結點,如果找到,返回ture,否則返回false
 */
function searchParent(keyword,node){
    if(node == null){
        return false;
    }
    if(node.name.indexOf(keyword)!=-1){
        return true;
    }
    //遞歸查找父結點
    return searchParent(keyword,node.getParentNode());
}

 參考鏈接:https://www.cnblogs.com/bsc2012/p/9241739.html


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM