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

灰太狼 2022-04-05 15:42 639阅读 0赞

html页面需要引入以下资源

html页面结构

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