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方法中什么都没有写，但是这个问题确实是解决了。