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;
            }

• 代码中出现的一些属性是我根据自己的需要而设置的，大家只要了解异步加载的步骤和基本配置就可以了。