成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

zTree分批異步加載方式下實現(xiàn)節(jié)點搜索功能

Shisui / 2646人閱讀

摘要：這個方法我是參考精通上面關(guān)于等待頁面加載完的方法來寫的如果樹已經(jīng)加載完，馬上執(zhí)行函數(shù)獲取沒有異步加載過的節(jié)點如果節(jié)點數(shù)為零則說明已經(jīng)加載完執(zhí)行函數(shù)定義了這個方法，然后就可以在這個方法實現(xiàn)實現(xiàn)你要搜索的功能了在這里寫搜索節(jié)點的代碼

? ? ? ?最近公司做一個項目用到zTree，zTree功能強(qiáng)大就不用多說了，相信用過的人都知道。
? ? ? ?公司項目因為要展示的節(jié)點非常多，所以要求要實現(xiàn)搜索節(jié)點的功能，zTree確實很強(qiáng)大，它提供了getNodesByParamByFuzzy(key, value, parentNode)方法可根據(jù)關(guān)鍵字進(jìn)行模糊查詢得到想要的節(jié)點，極其方便。但是問題來了，因為要讀取節(jié)點的數(shù)據(jù)量很大，節(jié)點的數(shù)量有幾萬個甚至更多，考慮到性能和時間上的問題，因此不能一次性把全部節(jié)點數(shù)據(jù)讀取出來，這里我采用的是zTree自帶的分批異步加載模式。但是這樣就又造成了另外一個問題，再使用getNodesByParamByFuzzy這個方法時便只能找到已經(jīng)加載出來的節(jié)點，而無法找到還沒有進(jìn)行加載的節(jié)點,從而使用戶體驗不好。
? ? ? ?為了解決這個問題，剛開始的想法是每次都去數(shù)據(jù)庫查詢數(shù)據(jù)，每次只顯示搜索到的第一條結(jié)果，然后再進(jìn)行下一條查詢，查到最后一條時又返回第一條，事實這樣的思路是行的通的，但是這樣實現(xiàn)起來非常麻煩，而在項目中通常都不止一棵樹，難不成每棵樹都要這樣，為了這小小的功能卻要寫如此多的代碼實在惡心，廢話不多說，下面是我自己想的認(rèn)為比較好的方法?？聪旅娲a：

// 節(jié)點加載完的回調(diào)函數(shù)，加載方式依舊是分批加載，但是不是等用戶展開節(jié)點才去加
// 載，而是讓它自動完成加載，這里不好的地方是依舊要加載全部數(shù)據(jù)，所以必須等待
// 它加載完才能使用搜索功能
function onAsyncSuccess(event, treeId, treeNode, msg) {
    var zTreeObj = $.fn.zTree.getZTreeObj();
    // 這個方法是將標(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é)點是否已經(jīng)加載過，如果已經(jīng)加載過則不需要再加載
        if (!nodes[i].zAsync) {
            zTreeObj.reAsyncChildNodes(nodes[i], "", true);
        }
    }
}

? ? ? ?所以還必須定義多一個判斷樹節(jié)點是否已經(jīng)全部加載完的方法。這個方法我是參考《精通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é)點
        var nodes = zTreeObj.getNodesByFilter(funciton(node) {
            return !node.zAsync;
        });
        // 如果節(jié)點數(shù)為零則說明已經(jīng)加載完
        if (nodes.length == 0) {
            clearInterval(treeAsyncReady.timer);
            treeAsyncReady.timer == null;
            
            // 執(zhí)行函數(shù)
            f();
            
            treeAsyncReady.done = true;
        }
    }, 13);
}

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/78978.html

相關(guān)文章

  • zTree分批異步加載方式下實現(xiàn)節(jié)點搜索功能

    摘要：如果樹已經(jīng)加載完，馬上執(zhí)行函數(shù)獲取沒有異步加載過的節(jié)點如果節(jié)點數(shù)為零則說明已經(jīng)加載完執(zhí)行函數(shù)實現(xiàn)搜索功能定義了這個方法，然后就可以在這個方法實現(xiàn)實現(xiàn)你要搜索的功能了。 前言 最近公司做一個項目用到zTree，zTree功能強(qiáng)大就不用多說了，相信用過的人都知道。公司項目因為要展示的節(jié)點非常多，所以要求要實現(xiàn)搜索節(jié)點的功能，zTree確實很強(qiáng)大，它提供了getNodesByParamByF...

    kaka 評論0 收藏0

  • zTree -- jQuery 樹插件 構(gòu)造treeNode JSON 數(shù)據(jù)對象

    摘要：前言是一個依靠實現(xiàn)的多功能樹插件。不同的樹目錄根據(jù)不同的數(shù)據(jù)，在服務(wù)器端編寫好不同的，將其配置在這里即可。依賴獲取的數(shù)據(jù)類型，默認(rèn)值。依賴用于對返回數(shù)據(jù)進(jìn)行預(yù)處理的函數(shù)。詳細(xì)說明參見文檔代碼還是樹插件使用方法與例子中的那個，不在重復(fù)粘貼。 前言 zTree 是一個依靠 jQuery 實現(xiàn)的多功能 樹插件。 網(wǎng)址：http://www.ztree.me/v3/main.p... 上回說到...

    周國輝 評論0 收藏0

  • zTree -- jQuery 樹插件 使用方法與例子

    摘要：簡介是一個依靠實現(xiàn)的多功能樹插件。使用說明下載文件將需要使用的相關(guān)的文件分別放置到相應(yīng)目錄，并且保證相對路徑正確。頁面分別在和中引入文件，如代碼所示。設(shè)置是否顯示節(jié)點的圖標(biāo)。 簡介 zTree 是一個依靠 jQuery 實現(xiàn)的多功能 樹插件。 網(wǎng)址：http://www.ztree.me/v3/main.p... 上面的網(wǎng)址里有ztree的詳細(xì)介紹、Demo 演示、API 文檔、入門指...

    hightopo 評論0 收藏0

  • 淘寶新勢力周H5性能優(yōu)化實戰(zhàn)

    摘要：前言淘寶新勢力周春上新是命運石鏈路鏈路第一次承接級大促，面對級大促內(nèi)容豐富且復(fù)雜的頁面需求，鏈路遇到了一些性能問題，在未進(jìn)行性能優(yōu)化之前，搭建出來的頁面，業(yè)務(wù)方普遍反饋頁面卡頓嚴(yán)重，無法滑動。 前言 淘寶新勢力周（春上新）是命運石kimi鏈路（H5鏈路）第一次承接S級大促，面對S級大促內(nèi)容豐富且復(fù)雜的頁面需求，kimi鏈路遇到了一些性能問題，在未進(jìn)行性能優(yōu)化之前，搭建出來的頁面，業(yè)務(wù)方...

    Lionad-Morotar 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<