• 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

  • 相关阅读:
    SQL-W3School-高级:SQL LIKE 操作符
    SQLW3School-高级:SQL TOP 子句
    SQL-W3School-基础:SQL DELETE 语句
    SQL-W3School-基础:SQL UPDATE 语句
    SQL-W3School-基础:SQL INSERT INTO 语句
    SQL-W3School-基础:SQL ORDER BY 子句
    SQL-W3School-基础:SQL AND & OR 运算符
    SQL-W3School-基础:SQL WHERE 语句
    SQL-W3School-基础:SQL DISTINCT 语句
    SQL-W3School-基础:SQL SELECT 语句
  • 原文地址:https://www.cnblogs.com/wuss/p/11088918.html
Copyright © 2020-2023  润新知