摘要：如果樹已經加載完，馬上執行函數獲取沒有異步加載過的節點如果節點數為零則說明已經加載完執行函數實現搜索功能定義了這個方法，然后就可以在這個方法實現實現你要搜索的功能了。

最近公司做一個項目用到zTree，zTree功能強大就不用多說了，相信用過的人都知道。
公司項目因為要展示的節點非常多，所以要求要實現搜索節點的功能，zTree確實很強大，它提供了getNodesByParamByFuzzy方法可根據關鍵字進行模糊查詢得到想要的節點，極其方便。但是問題來了，因為要讀取節點的數據量很大，節點的數量有幾萬個甚至更多，考慮到性能和時間上的問題，因此不能一次性把全部節點數據讀取出來，這里我采用的是zTree自帶的分批異步加載模式。但是這樣就又造成了另外一個問題，再使用getNodesByParamByFuzzy這個方法時便只能找到已經加載出來的節點，而無法找到還沒有進行加載的節點,從而使用戶體驗不好。

為了解決這個問題，剛開始的想法是每次都去數據庫查詢數據，每次只顯示搜索到的第一條結果，然后再進行下一條查詢，查到最后一條時又返回第一條，事實這樣的思路是行的通的，但是這樣實現起來非常麻煩，而在項目中通常都不止一棵樹，難不成每棵樹都要這樣，為了這小小的功能卻要寫如此多的代碼實在惡心，廢話不多說，下面是我自己想的認為比較好的方法。看下面代碼：

// 節點加載完的回調函數，加載方式依舊是分批加載，但是不是等用戶展開節點才去加
// 載，而是讓它自動完成加載，這里不好的地方是依舊要加載全部數據，所以必須等待
// 它加載完才能使用搜索功能
function onAsyncSuccess(event, treeId, treeNode, msg) {
    var zTreeObj = $.fn.zTree.getZTreeObj();
    // 這個方法是將標準 JSON 嵌套格式的數據轉換為簡單 Array 格式
    var nodes = zTreeObj.transformToArray(zTreeObj.getNodes()); 
    for (var i = 0; i < nodes.length; i++) {
        // 判斷節點是否已經加載過，如果已經加載過則不需要再加載
        if (!nodes[i].zAsync) {
            zTreeObj.reAsyncChildNodes(nodes[i], "", true);
        }
    }
}

所以還必須定義多一個判斷樹節點是否已經全部加載完的方法。這個方法我是參考《精通JavaScript》上面關于等待頁面加載完的方法來寫的。

function treeAsyncReady(treeId, f) {
    // 如果樹已經加載完，馬上執行函數
    if (treeAsyncReady.done) {
        return f();
    }
    
    var zTreeObj = $.fn.zTree.getZTreeObj();
    
    treeAsyncReady.timer = setInterval(function() {
        if (treeAsyncReady.done) {
            return false;
        }
        
        // 獲取沒有異步加載過的節點
        var nodes = zTreeObj.getNodesByFilter(funciton(node) {
            return !node.zAsync;
        });
        // 如果節點數為零則說明已經加載完
        if (nodes.length == 0) {
            clearInterval(treeAsyncReady.timer);
            treeAsyncReady.timer == null;
            
            // 執行函數
            f();
            
            treeAsyncReady.done = true;
        }
    }, 13);
}

定義了這個方法，然后就可以在這個方法實現實現你要搜索的功能了。

treeAsyncReady("treeId", function() {
    // 在這里寫搜索節點的代碼
    ...
});

搜索節點的功能要求根據關鍵字模糊匹配節點，并且要展開節點所在的父節點直到根節點。

function swarchNodes(treeId, keyword) {
    var zTreeObj = $.fn.zTree.getZTreeObj();
    
    // 去掉上一次查詢到的節點顏色，如果是第一次搜索則不用
    if (searchNodes.nodes) {
        var prevNodes = searchNodes.nodes;
        for (var i = 0; i < prevNodes.length; i++) {
            prevNodes[i].highlight = false;
            zTreeObj.updateNode(prevNodes[i]);
        }
        // 收起全部節點
        zTreeObj.expandAll(false);
    }
    
    // 重新查找節點
    var nodes = zTreeObj.getNodesByParamFuzzy("name", $.trim(keyword));
    for (var i = 0; i < nodes.length; i++) {
        nodes[i].highlight = true;
        zTreeObj.updateNode(nodes[i]);
        
        // 判斷是否是根節點,如果是根節點則不用展開
        if (nodes[i].level != 0) {
            // 自己定義的一個查找全部父節點的方法
            var parentNodes = getParentNodes(treeId, nodes[i]);
            // **這里主要展開節點時必須先從根節點開始展開，否則會出問題**
            for (var j = parentNodes.length - 1; j >= 0; j--) {
                // 展開沒有展開的父節點
                if (!parentNodes[j].open) {
                    zTreeObj.expandNode(parentNodes[j], true, false, false);
                }
            }
        }
    }
    
    // 緩查找到的節點
    searchNodes.nodes = nodes;
}

這個方法是查找節點的全部父節點，直到根父節點。

function getParentNodes(treeId, node, cache) {
    // 緩存變量
    cache = cache || [];
    var zTreeObj = $.fn.zTree.getZTreeObj();
    var parentNode = node.getParentNode();
    // 有父節點則緩存，直到根節點
    if (parentNode != null) {
        cache.push(parentNode);
    } else {
        return cache;
    }
    // 遞歸調用查找父節點
    return getParentNodes(treeId, parentNode, cache);
}