瀚海璨夜 / 小白之路 / 关于zTree隐藏和显示节点的问题

分享

   

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

2017-05-03  瀚海璨夜

最近在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;
        }
    }
复制代码

 

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多
    喜欢该文的人也喜欢 更多

    ×
    ×

    ¥.00

    微信或支付宝扫码支付:

    开通即同意《个图VIP服务协议》

    全部>>