關(guān)于zTree隱藏和顯示節(jié)點的問題

瀚海璨夜 2017-05-03

展開全文

最近在zTree的使用上遇到了點問題，調(diào)完后特別在這記錄下。

項目上要求的功能是實現(xiàn)對樹節(jié)點的搜索功能，之前實現(xiàn)的方式是對樹的節(jié)點遍歷，篩選出符合的搜索條件的節(jié)點，然后重新生成一棵樹。

但是對于數(shù)據(jù)量比較大的數(shù)而言，這種做法并不可取。

在看到了zTree的exhide這個拓展包后，我決定用hideNodes和showNodes來實現(xiàn)這個方法。

實現(xiàn)方式是：先將原先的Node通過hideNodes全部隱藏，然后再根據(jù)搜索條件過濾出符合條件的nodes，調(diào)用showNodes顯示，但是樹的節(jié)點無法正常顯示。

搜索后：

調(diào)了很久才發(fā)現(xiàn)如果父節(jié)點是hide的話，那么即使子節(jié)點是顯示的，這個子節(jié)點也無法被正常顯示出來。(可能是之前的重新生成樹的做法讓我沒想到這一點)

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

 //點擊查詢按鈕
    $(document).off("click","#searchNode").on("click","#searchNode",function(){
        var zTree = $.fn.zTree.getZTreeObj("treePanel");
        //顯示隱藏的節(jié)點
        nodes = zTree.getNodesByParam("isHidden", true);
        zTree.showNodes(nodes);
        
        var root = zTree.getNodeByParam("level", "0");
        
        var hiddenNodes = new Array();
        
        
        //篩選出要隱藏的企業(yè)
        var inputStr = $('#inputStr').val();
        
        filterNodes(root, inputStr, hiddenNodes);
        zTree.hideNodes(hiddenNodes);
    });

因為同時篩選出父節(jié)點的過程比較復(fù)雜，不能簡單使用一個filter函數(shù)就解決，于是我自己寫了一個遍歷樹的方法進行篩選。

用了遞歸的實現(xiàn)，如果樹的層次比較深的話，可能棧會吃不消，請根據(jù)具體情況使用。

/**
     * 遍歷樹節(jié)點，將 
     * 1.自身不滿足搜索條件 
     *     且 
     * 2.其子節(jié)點不包含有滿足條件的節(jié)點
     * 的節(jié)點加入到filterResult中
     * 
     * @param node 查詢的節(jié)點
     * @param inputStr 搜索條件
     * @param filterResult 過濾的結(jié)果集
     * @return 該節(jié)點是否滿足條件
     */
    function filterNodes(node, inputStr, filterResult){
        if(node != null){
            //自身是否符合搜索條件
            var selfMatch = node.name.indexOf(inputStr) > -1;
            //子節(jié)點是否有滿足的條件的節(jié)點
            var childMatch = false;
            
            var children = node.children;
            if(children != undefined){
                for(index in children){
                    childMatch = filterNodes(children[index], inputStr, filterResult) || childMatch;
                }
            }
            
            //自身不滿足搜索條件 且其子節(jié)點不包含有滿足條件的節(jié)點
            if(!selfMatch && !childMatch){
                filterResult.push(node);
            }
            
            return selfMatch || childMatch;
        }else{
            return true;
        }
    }