ZTree學習(二):非同步載入樹結構
阿新 • • 發佈:2019-02-04
一,使用場景
遇到這種大資料載入,特別的樹結構,而且是在彈出層中載入的,就會出現閃一下或者是卡主的情況,所以選擇非同步載入。
二,非同步載入使用關鍵,還是在setting引數上
var setting = { async:{ autoParam:["parentId"], enable:true, type:"post", url:getUrl, dataFilter:filter, }, check : { chkStyle: "radio", enable: false, chkboxType : { "Y" : "s", "N" : "ps" }, radioType : "level" }, view: { dblClickExpand: false, addDiyDom:addDiyDom }, data : { key : { name : "unitName" }, simpleData : { enable : true, idKey : "id", pIdKey : "parentId", rootPId : 0 } }, callback : { beforeAsync : ztreeBeforeAsync, onAsyncSuccess : ztreeOnAsyncSuccess, onClick:ztreeOnAsyncSuccess } };
最關鍵的部分就是async引數設定上的部分還有callback中onAsyncSuccess的設定上
autoParam:如果請求的url是帶引數的,此值就填寫引數名稱,當然如果是非同步載入,這個是一定有,這個是一個數組來的,如果有多個引數,那麼形式就是["1","2","3"]
enable:true, 表示是否使用非同步載入,當然是true了。
type:"post",請求方式,是post還是get,一般都是post。
url:getUrl,這個url的值一定不可以寫"",一定要記住,記住,記住。當然想我這裡寫一個方法,其實我這裡是一個空方法。是可以的。
dataFilter:filter,這個引數非常重要。重要到哪裡,我們一會兒單獨說。
onAsyncSuccess : ztreeOnAsyncSuccess,用於捕獲非同步載入正常結束的事件回撥函式,這個函式就是主要呼叫的函式。非同步獲取需要的資料,然後載入上去就可以。
function ztreeOnAsyncSuccess(event, treeId, treeNode){ var url = "unitAction!xzqhTree.action?parentId="; if(treeNode == undefined){ url += "1"; } else{ url += treeNode.id; } $.ajax({ type : "post", url : url, data : "", dataType : "json", async : true, success : function(jsonData) { if (jsonData != null) { var data = jsonData.unitList; if(data != null && data.length != 0){ if(treeNode == undefined){ treeObj.addNodes(null,data,true);// 如果是根節點,那麼就在null後面載入資料 } else{ treeObj.addNodes(treeNode,data,true);//如果是載入子節點,那麼就是父節點下面載入 } } treeObj.expandNode(treeNode,true, false, false);// 將新獲取的子節點展開 } }, error : function() { alert("請求錯誤!"); } }); };
就是一個簡單的ajax請求。
還有就是在JS的初始化中把樹結構初始化一下 $.fn.zTree.init($("#chooseXzqhTree"), setting);
到這裡,一個簡單的非同步載入就完成了。
三:遇到的問題
每次非同步載入之後,老是會出現一個undefined節點,沒有緣由的出現,解決辦法是設定 dataFilter:filter,這個引數非常重要。重要到哪裡,我們一會兒單獨說。
是的,沒有錯,就是設定了dataFilter,雖然filter方法中什麼都沒有寫,但是這個問題確實是解決了。