相信新手用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;
}
- 代码中出现的一些属性是我根据自己的需要而设置的,大家只要了解异步加载的步骤和基本配置就可以了。
分享到:
相关推荐
最近项目中有一个比较大型的树节点加载,网上面也看过一些解决方案,感觉都不是很好,也有很多误区,比如单击节点时加载子...ztree fileter方法是在每次展开时都会执行,所以根据不同的请求达到异步加载子节点的需求。
ztree异步加载demo,ztree异步加载demo.ztree异步加载demo
jquery ztree 异步加载 延迟加载效果
ztree实现异步加载,使用java语言
用springMVC和mysql,实现了一个简单的zTree异步加载例子,希望可以帮到更多的人。。。
ztree 异步加载 拖拽 右键菜单 功能
原来整理的zTree异步加载的应用例子,很多朋友需要,就放到这里了。
关于javaWeb(S2SH)中使用zTree异步加载树节点问题
本人最近在做区域切换,由于是全国地区的,数据高达60多万条,所有采用异步加载的方式。这是一个ztree异步加载全国地区的代码。controlller是后台,tree.jsp是页面。
主要为大家详细介绍了jquery zTree异步加载、模糊搜索简单实例,感兴趣的小伙伴们可以参考一下
zTree 是一个依靠 jQuery 实现的多功能 “树插件”。下面通过本文给大家分享jQuery zTree 异步加载添加子节点重复问题,需要的朋友参考下吧
主要介绍了zTree异步加载展开第一级节点的实现方法,需要的朋友可以参考下
使用JQuery的插件zTree,进行动态的异步加载,带数据库,可直接运行
ztree的异步加载实现jfinal,希望可以帮到你
ztree+dwr实现的异步加载树形菜单
jquery ztree 异步动态加载部署直接运行,大数据量,异步是很好的处理方式
一个Ztree异步分批加载demo,只有前台代码,后台只需要提供分页查询,然后页码自动增长即可。