ztree异步加载

相信新手用ztree的时候,对异步加载会有些困惑,我开始的时候也是看了API花了些时间才搞定了异步加载,在这里分享给大家。
我后台代码生成的是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]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值