ztree 异步加载示例

     工作一年了遇到过三种数型结构JS，dtree 、mifTree、zTree.用起来感觉还是zTree最好，之前也写过一个ztree的学习小结吧，看的人也很多，这里推荐下！！十分感谢ztree作者给我们带来了这么好的一个插件。

     api网址：http://www.ztree.me/v3/api.php。

     iteye博客地址：http://ztreeapi.iteye.com/。

     这次要总结的是ztree的异步加载，异步加载多用于数据量相对较大的情况，如果全部查询出来组织成树的话可能要创建很多dom，出现假死，加载失败等现象。异步加载听上去感觉挺吓唬人的，其实看看api和例子的话很好弄的，以前自己在做户籍地的关联时做了一个，刚好近期又要用到，感觉吧虽然不难可还是总结下更方便。不说废话了。

     首先引插件什么的都是必要的，不知道的话找下我的第一篇文章。对于ztree我个人倾向于使用简单数据类型，也就是数组的方式进行初始化，感觉json数据看上去很乱，逻辑也不是很好些，而数组的话只要我们给了对的数据就OK了，所以这篇文章也是基于简单数据类型的。至于json的话我还真没做过，我想也差不多吧。

     异步加载的话就是对setting的配置中加上这么一段

    

var setting = {
	async:{
		autoParam:["id=tid"],
		contentType:"application/x-www-form-urlencoded",
		enable:true,
		type:"post",
		url:"<%=path%>/deployment/devAndSysAction!synAddDevice.action"
	}
	,data:{
		simpleData :{
		   enable:true
		}
	}
};

 async就是对异步的配置，autoParam是自动提交的参数，这里要说下后面的tid才是我们在后台接受的参数名 ，enable就是控制异步加载是否生效，其他的都没什么说的了。

然后后台我们接值组织数据，我这里用的是伪码。

String id = request.getParameter("tid");
treeStr = "";
List<MyObject> lstMyObj = myService.findMyData(parentId);
if(lstMyObj!=null){
	for(int i=0,len=lstMyObj.size();i<len;i++){
		treeStr += "{id:'myId',pId:'parentId',name:'myname' ,isParent:true},";
	}
}
treeStr = "["+treeStr.substring(0,treeStr.length()-1)+"]";
这里ajax返回treeStr

 这样的话就OK了，这里有一个地方得十分注意就是isParent这个属性，在异步加载中一定要知道这个节点下面是否有子节点，如果有就设置成true，如果没有就设置成false，如果不设置的话就默认是false，那么即使你本次异步加载出的节点有子节点的话，它也不会在节点前加上个小+号，那你就无法进行异步加载了，而如果都设置成true的话，你点击没有子节点的节点前的+就会出现这种情况 ，有显示上的问题。所以这个isParent的正确设置很重要。

 

 

评论

1 楼 liuweihug 2014-05-07  

Ztree教程-采用Jquery Ajax异步加载数据和Ztree自带异步加载数据
http://www.suchso.com/projecteactual/ztree-jiaocheng-aspnet-demo-ashx-jquery-ajax-ztree-setting-async.html