zTree使用
使用zTree动态加载大量数据:
- 参考官方API
- 官方Demo
- 关键逻辑
参考官方API
官方API地址 —— [ zTreeAPI]
主要包括setting 配置详解、zTree 方法详解。
参考官方Demo
官方Demo地址 —— [ zTreeDemo]
分批异步加载大数据量
此 Demo 专门用于测试分批异步加载,每次展开节点都要重新进行异步加载。
1、大数据量加载说明
1)、对于某一级节点数多达几千个的时候,zTree 默认的延迟加载是无效的,此 Demo 演示了一种原先 zTree v2.6 时的分批加载节点的方法。
2)、此方法适用于1、2千个节点必须全部显示的需求。
3)、此方法并不能解决加载慢的问题,相反只会让最终结果出现的更慢,只是可以有限度的避免浏览器假死,而且显示的节点越多就越慢。
4)、对于某一级节点数至少几千个的情况,另一个解决方案是:分页异步加载。
async load log:
[ 10:23:35 105 ] treeNode:2000个节点
加载完毕,共进行 20 次异步加载, 耗时:4.738 秒
[ 10:23:41 366 ] treeNode:1000个节点
加载完毕,共进行 10 次异步加载, 耗时:1.792 秒
2、setting 配置信息说明
需要设置 setting.async 异步加载部分的参数
建议关闭动画效果 setting.view.expandSpeed = "";
其他不需要进行特殊的配置,根据自己的需求自行设置
3、treeNode 节点数据说明
对 节点数据 没有特殊要求,用户可以根据自己的需求添加自定义属性
关键逻辑
配置 :
var setting = {
async: { /*异步操作相关*/
enable: true,
url: getUrl /*异步获取数据所用地址*/
},
check: { /*关联操作相关*/
enable: false /*设置zTree的节点上是否显示 checkbox/radio 默认值: false*/
},
data: {
simpleData: {
enable: true /*是否启用简单数据模式*/
}
},
view: {
expandSpeed: ""
},
callback: { /*各个事件相关,处理代码逻辑*/
beforeExpand: beforeExpand,
onAsyncSuccess: onAsyncSuccess,
onAsyncError: onAsyncError,
onClick: zTreeOnClick
}
};
数据初始化 :
/**
* 页面初始化
*/
$(document).ready(function () {
onLoadZTree();
});
/**
* 加载树形结构数据
*/
function onLoadZTree() {
var treeNodes;
$.ajax({
async: false, //是否异步
cache: false, //是否使用缓存
type: 'POST', //请求方式:post
dataType: 'json', //数据传输格式:json
url: "", //请求的action路径
error: function () {
//请求失败处理函数
alert('亲,请求失败!');
},
success: function (data) {
//请求成功后处理函数
treeNodes = data; //把后台封装好的简单Json格式赋给treeNodes
}
});
var t = $("#tree");
t = $.fn.zTree.init(t, setting, treeNodes);
//调用默认展开第一个结点
var nodes = t.getNodes();
t.expandNode(nodes[0], true);
}