Ztree实现模糊查询(隐藏未匹配的子父节点)

html页面需要引入以下资源

<!-- 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>

js核心代码

       对于一个结点,它是否需要显示,不仅仅只看它是否包含搜索关键字,还需要看它的父结点和子结点是否包含关键字,只有当父结点和子结点都不包含搜索关键字,该结点才需要隐藏。

    /**
     * 查找子结点,如果匹配模糊查询的关键字则返回false,否则返回true
     */
    function searchChildren(pNode,keyword){
        var childs=pNode.children;
        var isexit=true;
        for(var i = 0;i < childs.length;i++){
          if(childs[i].isParent){
             isexit=searchChildren(childs[i]);
                 if(!isexit){
                        retrun isexit;
                 }
           }else{
             if(node.name.indexOf(keyword)!=-1){ 
                 return false; 
                 }
            }
          }
        return isexit;
    }

      //查找不符合条件的结点 
      //返回true表示需要隐藏,返回false表示不需要隐藏 。
      function filterFunc(node){ 
          var keyword=$("#keyword").val(); 
         //如果当前结点或其子节点匹配模糊查询的关键字,则该结点不隐藏 
         if(node.name.indexOf(keyword)!=-1){
           return false;
           }
         if(node.isParent){
           var b=searchChildren(node,keyword);
           return b;
           }
           return true;
      }

    var hiddenNodes = [];
    $('#search').click(function(){
        var ztreeObj = $.fn.zTree.getZTreeObj("ztreeObj");
        var keyword=$("#keyword").val(); 
        //显示上次搜索后隐藏的结点,注意:使用hideNodes()方法时需要引包jquery.ztree.exhide-3.5.min.js
        ztreeObj.showNodes(hiddenNodes);
        //获取不符合条件的子父结点
        hiddenNodes=ztreeObj.getNodesByFilter(filterFunc);
        //隐藏不符合条件的子父结点,注意:使用hideNodes()方法时需要引包jquery.ztree.exhide-3.5.min.js
        ztreeObj.hideNodes(hiddenNodes);
        //判断ztree显示时是否需要展开。
        if(keyword == null || keyword == ""){
            return;
        }else{
        ztreeObj.expandAll(ztreeObj);
        }
    });


//jquery.ztree.exhide-3.5.min.js插件的下载地址:
//https://download.csdn.net/download/weixin_41477980/10847414
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值