利用ztree实现树搜索

最新推荐文章于 2023-06-14 10:21:52 发布

ym_diver

最新推荐文章于 2023-06-14 10:21:52 发布

阅读量3.6k

点赞数

分类专栏： php 文章标签： JQuery zTree 搜索

本文链接：https://blog.csdn.net/ym_diver/article/details/78079444

版权

本文介绍了如何使用zTree实现树搜索功能，包括延迟搜索和模糊搜索，适用于单选场景。针对46000个测试数据，搜索耗时在1s到1.5s之间。同时，文章指出了这种搜索方式的两个缺点：1) 用户输入过程中可能造成连续搜索导致的卡顿；2) 不适用于需要排除某些节点的多选场景。

摘要由CSDN通过智能技术生成

最近工作中需要利用ztree实现树搜索功能，在网上看了一下别人的轮子觉得都有点不适合需求，所以根据自己的实际情况进行了改进，经过几次优化，觉得效果还能用：

 
  /** 
 
  * 搜索功能3.0 
 
  * @type {Element} 
 
  */ 
 
  var node = document.querySelector('#client_name'); 
 
  var cpLock = false; 
 
  var bower = myBrowser()  //判断浏览器类型，在此省略 
 
  //实现延迟搜索，如果上次的输入还没有被执行，那么就取消上一次的执行 
 
  var timeoutId = null; 
 
  function searchNodeLazy(keyword) {
    
      if (timeoutId) {
    
          clearTimeout(timeoutId); 
 
      } 
 
      timeoutId = setTimeout(function(){
    
          search_keyword(keyword); 
 
      }, 500); 
 
  } 
 
  //实现模糊搜索 
 
  function search_keyword(keyword) {
    
      if(keyword === ""){
    
          return; 
 
      } 
 
      var zTree = $.fn.zTree.getZTreeObj("ztree"); 
 
      var allNodes = zTree.transformToArray(zTree.getNodes()); 
 
      zTree.hideNodes(allNodes); 
      //当开始搜索时，先将所有节点隐藏 
 
      var nodeList = zTree.getNodesByParamFuzzy('r