相信新手用ztree的时候,对异步加载会有些困惑,我开始的时候也是看了API花了些时间才搞定了异步加载,在这里分享给大家。
我后台代码生成的是json格式的数据,数据大家按各自的需求生成,这里只给出前端的代码。
设置setting,这里只关注async属性的配置
1、初始化数据
2、异步加载数据
3、过滤数据
[list]
[*]代码中出现的一些属性是我根据自己的需要而设置的,大家只要了解异步加载的步骤和基本配置就可以了。
[/list]
我后台代码生成的是json格式的数据,数据大家按各自的需求生成,这里只给出前端的代码。
设置setting,这里只关注async属性的配置
var setting = {
//异步加载配置
async: {
enable: true,
url: top.basePath + '/pages/system/buildColumnTreeNodes.action?isAsynchronized=isAsynchronized',
autoParam: ["objId"],
dataType: "json",
dataFilter: filter
},
data: {
simpleData: {
enable: true
}
},
callback:{
onClick:onClick
}
};
1、初始化数据
//展示初始化树数据
function showTree(){
jQuery.ajax({
type:'GET',
url:top.basePath + '/pages/system/buildColumnTreeNodes.action',
dataType:'json',
success:function(data){
var zNodes = data.model;
$.each(zNodes,function(key, val){
if(val.haveNext)
{
val.isParent = true;//isParent属性设置为true,才能作为父节点异步加载下一节点!
}
if(val.level == 0)
{
val.open = true;
val.icon = '<%=path%>/plugins/ztree/css/zTreeStyle/img/diy/1_close.png';
}else{
val.icon = '<%=path%>/plugins/ztree/css/zTreeStyle/img/diy/1_open.png';
}
});
var zTreeObj = $.fn.zTree.init($("#columnTree"), setting, zNodes);
}
});
}
2、异步加载数据
每次点击父节点前的加号就会执行async属性中的url:top.basePath + '/pages/system/buildColumnTreeNodes.action?isAsynchronized=isAsynchronized'
请求后台获取数据
3、过滤数据
//处理异步加载后返回的数据
function filter(treeId, parentNode, responseData){
var zNodes = responseData.model;
$.each(zNodes,function(key, val){
if(val.haveNext)
{
val.isParent = true;//isParent属性设置为true,才能作为父类节点异步加载下一节点!
}
if(val.level == 0)
{
val.open = true;
val.icon = '<%=path%>/plugins/ztree/css/zTreeStyle/img/diy/1_close.png';
}else{
val.icon = '<%=path%>/plugins/ztree/css/zTreeStyle/img/diy/1_open.png';
}
});
return zNodes;
}
[list]
[*]代码中出现的一些属性是我根据自己的需要而设置的,大家只要了解异步加载的步骤和基本配置就可以了。
[/list]