1. 程式人生 > >ZTree學習(二):非同步載入樹結構

ZTree學習(二):非同步載入樹結構

一,使用場景


遇到這種大資料載入,特別的樹結構,而且是在彈出層中載入的,就會出現閃一下或者是卡主的情況,所以選擇非同步載入。

二,非同步載入使用關鍵,還是在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方法中什麼都沒有寫,但是這個問題確實是解決了。