ztree在onCheck()方法中防止因觸發聯動關系導致頁面多次渲染而卡死的問題

　　這幾天在項目中遇到了要使用樹形選擇框, 而且要求比較復雜,具體敘述如下:

　　首先是有個選擇框,左邊選擇是適用的商品,右邊顯示已經選擇的商品.也就是說,左邊每次勾選操作,都要觸發一個事件去刷新右邊的頁面, 而且,左邊商品如果選擇大類,則右邊顯示大類,其下小類都不顯示

也就是說有父子聯動的關系. 剛開始的時候, 選擇了使用bootStrap的tree_view這個插件,一開始還好,基本成型,后來測試時才發現問題,,當數據量很大的時候,,這個插件用起來很卡很卡,,而且又加了個帶搜索功能,這個插件就顯得有點雞肋,這時才發現了ztree.

　　ztree雖然沒有tree_view界面好看,但是其擁有強大的api,和渲染速度,,比前者好用多了.后面在數據渲染的時候遇到了一個問題,當時設置了父子級關聯,然后再oncheck里面刷新右側的顯示界面.剛開始沒啥問題,,后面當商品加到8000個的時候,,之前的問題又出現了,當我點擊父級的時候,頁面直接無響應.打上斷點跟着,才發現ztree內部會由於關聯關系,多次觸發onchek事件,導致頁面直接卡死.苦思良久都沒得辦法..直到無意中看到一個方法

                                                                  

beforeCheck,對就是這個方法,在oncheck觸發之前的回調,,於是我想到了辦法

var temp="";
    var setting = {
        check: {
            enable: true,
            autoCheckTrigger: true
        },
        data: {
            simpleData: {
                enable: true
            }
        },
        callback: {
            onCheck: zTreeOnCheck,
            beforeCheck: zTreeBeforeCheck
        }
    };

    function zTreeBeforeCheck(treeId, treeNode){
        temp=treeNode;
    }
    function zTreeOnCheck(event, treeId, treeNode) {
    //debugger
        if(treeNode.name!=temp.name){
            return;
        }
        refresh(treeNode);      
    }

用一個temp去存儲將要觸發oncheck()的節點對象, 然后再在oncheck()方法中判斷觸發這個方法的是不是你當前所勾選的節點,如果不是就直接pass,這樣一來,下面的刷新頁面方法就不會因為父子聯動而多次觸發了,

頁面的響應速度也是杠杠的.現在真的發現,ztree真的是個強大的工具,速度快,功能全,有很多你想不到的方法.

最后附上ztree地址:http://www.treejs.cn/v3/api.php