• 博客园logo
  • 会员
  • 众包
  • 新闻
  • 博问
  • 闪存
  • 赞助商
  • HarmonyOS
  • Chat2DB
    • 搜索
      所有博客
    • 搜索
      当前博客
  • 写随笔 我的博客 短消息 简洁模式
    用户头像
    我的博客 我的园子 账号设置 会员中心 简洁模式 ... 退出登录
    注册 登录
不见花落
博客园    首页    新随笔    联系   管理    订阅  订阅
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

posted on 2019-06-26 11:29  不见花落  阅读(3569)  评论(0)    收藏  举报
刷新页面返回顶部
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3