【www.bbyears.com--jquery】
今天我们来学习Ztree异步加载数据的。我测试的全国城市数据有大概3900条。 我测试了一下Jquery 自带的$.ajax方法和Ztree的setting的async参数，性能上毫秒级别的，但是Ztree的setting的async参数性能上更好一些。 如图：
Ztree的setting的async参数说明：
autoParam:异步加载时需要自动提交父节点属性的参数。[setting.async.enable = true 时生效]
默认值：[ ]. 这个提交是ztree自带的一个属性的参数。记住。
contentType：和jquery contentType的一样
dataFilter：数据过滤函数，可以不要
dataType：和jquery dataType的一样
enable:是否异步。true 表示 开启 异步加载模式
false 表示 关闭 异步加载模式
如果设置为 true，请务必设置 setting.async 内的其它参数。
如果需要根节点也异步加载，初始化时 treeNodes 参数设置为 null 即可。
otherParam：这个是我们可以自定义的参数了。直接用 JSON 格式制作键值对，例如：{ key1:value1, key2:value2 } otherParam: { "oper":"city" }
type：和jquery type的一样
url：服务地址。设置固定的异步加载 url 字符串，请注意地址的路径，确保页面能正常加载。
url 内也可以带参数，这些参数就只能是通过 get 方式提交了，并且请注意进行转码
一些jquery的参数可以参考：[jquery $.ajax()实现Post数据到服务端]
我是使用了时间戳做了一下对比：
代码如下
var
begin = (
new
Date()).valueOf(); ;;
$(
"#beginztree"
).html(begin);
$.fn.zTree.init($(
"#treeDemoztree"
), setting);
var
endztree = (
new
Date()).valueOf(); ;;
$(
"#endztree"
).html(endztree-begin);
本次测试仅代表我当前环境的。
上代码：
代码如下var AjaxUrl = "service/Cityhandler.ashx";
$(document).ready(function () {
$("#tab-container").easytabs(); GetCityZtree();
GetCity();
});
//获取测试类型统计数据
function GetCity() {
var begin = (new Date()).valueOf(); ;;
$("#begin").html(begin);
$.ajax({
type: "post",
dataType: "json", traditional: true,
data: { oper: "city" },
url: AjaxUrl,
async: true,//表示同步执行
success: function (data, textStatus) {
if (data != null) {
$.fn.zTree.init($("#treeDemo"), setting, data);
var end = (new Date()).valueOf(); ;;
$("#end").html(end - begin);
}
},
complete: function (XMLHttpRequest, textStatus) { },
error: function (e) {
alert("获取测试类型统计数据失败，请刷新页面重新加载！");
}
});
}
var setting = {
async: {
enable: true,
url: AjaxUrl,
autoParam: [ ["id"],["zid"] ],
otherParam: { "oper":"city" }
}
};
function filter(treeId, parentNode, childNodes) {
if (!childNodes) return null;
for (var i = 0, l = childNodes.length; i < l; i++) {
childNodes[i].name = childNodes[i].name.replace(/.n/g, ".");
}
return childNodes;
}
//获取测试类型统计数据
function GetCityZtree() {
var begin = (new Date()).valueOf(); ;;
$("#beginztree").html(begin);
$.fn.zTree.init($("#treeDemoztree"), setting);
var endztree = (new Date()).valueOf(); ;;
$("#endztree").html(endztree-begin);
}
原文来自:http://www.suchso.com/projecteactual/ztree-jiaocheng-aspnet-demo-ashx-jquery-ajax-ztree-setting-async.html 感谢站长