关于zTree隐藏和显示节点的问题

最近在zTree的使用上遇到了点问题，调完后特别在这记录下。

 

项目上要求的功能是实现对树节点的搜索功能，之前实现的方式是对树的节点遍历，筛选出符合的搜索条件的节点，然后重新生成一棵树。

但是对于数据量比较大的数而言，这种做法并不可取。

在看到了zTree的exhide这个拓展包后，我决定用hideNodes和showNodes来实现这个方法。

 

实现方式是：先将原先的Node通过hideNodes全部隐藏，然后再根据搜索条件过滤出符合条件的nodes，调用showNodes显示，但是树的节点无法正常显示。

搜索后：

 

 

调了很久才发现如果父节点是hide的话，那么即使子节点是显示的，这个子节点也无法被正常显示出来。(可能是之前的重新生成树的做法让我没想到这一点)

 

于是改了改代码,功能就正常了：

 

 //点击查询按钮
    $(document).off("click","#searchNode").on("click","#searchNode",function(){
        var zTree = $.fn.zTree.getZTreeObj("treePanel");
        //显示隐藏的节点
        nodes = zTree.getNodesByParam("isHidden", true);
        zTree.showNodes(nodes);
        
        var root = zTree.getNodeByParam("level", "0");
        
        var hiddenNodes = new Array();
        
        
        //筛选出要隐藏的企业
        var inputStr = $('#inputStr').val();
        
        filterNodes(root, inputStr, hiddenNodes);
        zTree.hideNodes(hiddenNodes);
    });

 

因为同时筛选出父节点的过程比较复杂，不能简单使用一个filter函数就解决，于是我自己写了一个遍历树的方法进行筛选。

用了递归的实现，如果树的层次比较深的话，可能栈会吃不消，请根据具体情况使用。

 

/**
     * 遍历树节点，将 
     * 1.自身不满足搜索条件 
     *     且 
     * 2.其子节点不包含有满足条件的节点
     * 的节点加入到filterResult中
     * 
     * @param node 查询的节点
     * @param inputStr 搜索条件
     * @param filterResult 过滤的结果集
     * @return 该节点是否满足条件
     */
    function filterNodes(node, inputStr, filterResult){
        if(node != null){
            //自身是否符合搜索条件
            var selfMatch = node.name.indexOf(inputStr) > -1;
            //子节点是否有满足的条件的节点
            var childMatch = false;
            
            var children = node.children;
            if(children != undefined){
                for(index in children){
                    childMatch = filterNodes(children[index], inputStr, filterResult) || childMatch;
                }
            }
            
            //自身不满足搜索条件 且其子节点不包含有满足条件的节点
            if(!selfMatch && !childMatch){
                filterResult.push(node);
            }
            
            return selfMatch || childMatch;
        }else{
            return true;
        }
    }