ZTree学习(二):异步加载树结构

本文主要探讨ZTree的异步加载功能,重点在于设置参数以实现动态加载树形数据。通过讲解使用场景和实际操作中可能遇到的问题,帮助读者深入理解并掌握这一特性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一,使用场景


遇到这种大数据加载,特别的树结构,而且是在弹出层中加载的,就会出现闪一下或者是卡主的情况,所以选择异步加载。

二,异步加载使用关键,还是在setting参数上

var setting = {
		async:{
	        autoParam:["parentId"],  
	        enable:true, 
	        type:"post",  
	        url:getUrl,
	        dataFilter:filter,
	    },
		check : {
			chkStyle: "radio",
			enable: false,
			chkboxType : { "Y" : "s", "N" : "ps" },
			radioType : "level"
		},
		view: {
			dblClickExpand: false,
			addDiyDom:addDiyDom
		},
		data : {
			key : {
				name : "unitName"
			},
			simpleData : {
				enable : true,
				idKey : "id",
				pIdKey : "parentId",
				rootPId : 0
			}
		},
		callback : {
		    beforeAsync : ztreeBeforeAsync,
		    onAsyncSuccess : ztreeOnAsyncSuccess,
		    onClick:ztreeOnAsyncSuccess
		}
	};



最关键的部分就是async参数设置上的部分还有callback中onAsyncSuccess的设置上
autoParam:如果请求的url是带参数的,此值就填写参数名称,当然如果是异步加载,这个是一定有,这个是一个数组来的,如果有多个参数,那么形式就是["1","2","3"]
enable:true, 表示是否使用异步加载,当然是true了。
type:"post",请求方式,是post还是get,一般都是post。
url:getUrl,这个url的值一定不可以写"",一定要记住,记住,记住。当然想我这里写一个方法,其实我这里是一个空方法。是可以的。
dataFilter:filter,这个参数非常重要。重要到哪里,我们一会儿单独说。
onAsyncSuccess : ztreeOnAsyncSuccess,用于捕获异步加载正常结束的事件回调函数,这个函数就是主要调用的函数。异步获取需要的数据,然后加载上去就可以。

	function ztreeOnAsyncSuccess(event, treeId, treeNode){
		var url = "unitAction!xzqhTree.action?parentId=";
		if(treeNode == undefined){
			url += "1";
		}
		else{
			url += treeNode.id;
		}
		$.ajax({
			type : "post",
			url : url,
			data : "",
			dataType : "json",
			async : true,
			success : function(jsonData) {				
				if (jsonData != null) {		
					var data = jsonData.unitList;
					if(data != null && data.length != 0){
						if(treeNode == undefined){
							treeObj.addNodes(null,data,true);// 如果是根节点,那么就在null后面加载数据
						}
						else{
							treeObj.addNodes(treeNode,data,true);//如果是加载子节点,那么就是父节点下面加载
						}
					}
					treeObj.expandNode(treeNode,true, false, false);// 将新获取的子节点展开
				}
			},
			error : function() {
				alert("请求错误!");
			}
		});
		
	};




就是一个简单的ajax请求。
还有就是在JS的初始化中把树结构初始化一下  $.fn.zTree.init($("#chooseXzqhTree"), setting);
到这里,一个简单的异步加载就完成了。



三:遇到的问题


每次异步加载之后,老是会出现一个undefined节点,没有缘由的出现,解决办法是设定
dataFilter:filter,这个参数非常重要。重要到哪里,我们一会儿单独说。
是的,没有错,就是设置了dataFilter,虽然filter方法中什么都没有写,但是这个问题确实是解决了。
 
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值