摘要：如果樹已經(jīng)加載完，馬上執(zhí)行函數(shù)獲取沒有異步加載過的節(jié)點(diǎn)如果節(jié)點(diǎn)數(shù)為零則說明已經(jīng)加載完執(zhí)行函數(shù)實(shí)現(xiàn)搜索功能定義了這個(gè)方法，然后就可以在這個(gè)方法實(shí)現(xiàn)實(shí)現(xiàn)你要搜索的功能了。

最近公司做一個(gè)項(xiàng)目用到zTree，zTree功能強(qiáng)大就不用多說了，相信用過的人都知道。
公司項(xiàng)目因?yàn)橐故镜墓?jié)點(diǎn)非常多，所以要求要實(shí)現(xiàn)搜索節(jié)點(diǎn)的功能，zTree確實(shí)很強(qiáng)大，它提供了getNodesByParamByFuzzy方法可根據(jù)關(guān)鍵字進(jìn)行模糊查詢得到想要的節(jié)點(diǎn)，極其方便。但是問題來了，因?yàn)橐x取節(jié)點(diǎn)的數(shù)據(jù)量很大，節(jié)點(diǎn)的數(shù)量有幾萬個(gè)甚至更多，考慮到性能和時(shí)間上的問題，因此不能一次性把全部節(jié)點(diǎn)數(shù)據(jù)讀取出來，這里我采用的是zTree自帶的分批異步加載模式。但是這樣就又造成了另外一個(gè)問題，再使用getNodesByParamByFuzzy這個(gè)方法時(shí)便只能找到已經(jīng)加載出來的節(jié)點(diǎn)，而無法找到還沒有進(jìn)行加載的節(jié)點(diǎn),從而使用戶體驗(yàn)不好。

為了解決這個(gè)問題，剛開始的想法是每次都去數(shù)據(jù)庫查詢數(shù)據(jù)，每次只顯示搜索到的第一條結(jié)果，然后再進(jìn)行下一條查詢，查到最后一條時(shí)又返回第一條，事實(shí)這樣的思路是行的通的，但是這樣實(shí)現(xiàn)起來非常麻煩，而在項(xiàng)目中通常都不止一棵樹，難不成每棵樹都要這樣，為了這小小的功能卻要寫如此多的代碼實(shí)在惡心，廢話不多說，下面是我自己想的認(rèn)為比較好的方法?？聪旅娲a：

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

所以還必須定義多一個(gè)判斷樹節(jié)點(diǎn)是否已經(jīng)全部加載完的方法。這個(gè)方法我是參考《精通JavaScript》上面關(guān)于等待頁面加載完的方法來寫的。

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

定義了這個(gè)方法，然后就可以在這個(gè)方法實(shí)現(xiàn)實(shí)現(xiàn)你要搜索的功能了。

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

搜索節(jié)點(diǎn)的功能要求根據(jù)關(guān)鍵字模糊匹配節(jié)點(diǎn)，并且要展開節(jié)點(diǎn)所在的父節(jié)點(diǎn)直到根節(jié)點(diǎn)。

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

這個(gè)方法是查找節(jié)點(diǎn)的全部父節(jié)點(diǎn)，直到根父節(jié)點(diǎn)。

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