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

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

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

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

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

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

 1 var temp="";
 2     var setting = {
 3         check: {
 4             enable: true,
 5             autoCheckTrigger: true
 6         },
 7         data: {
 8             simpleData: {
 9                 enable: true
10             }
11         },
12         callback: {
13             onCheck: zTreeOnCheck,
14             beforeCheck: zTreeBeforeCheck
15         }
16     };
17 
18     function zTreeBeforeCheck(treeId, treeNode){
19         temp=treeNode;
20     }
21     function zTreeOnCheck(event, treeId, treeNode) {
22     //debugger
23         if(treeNode.name!=temp.name){
24             return;
25         }
26         refresh(treeNode);      
27     }

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

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

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