ExtJS 异步加载树

本文介绍了如何在ExtJS中实现异步加载树结构。主要利用Ext.tree.TreeLoader类从指定URL动态获取子节点数据。在节点展开时,通过触发'beforeload'事件并设置baseParams传递额外参数,服务端返回的javascript数组将被解析为树形结构。

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

异步加载用到的一个最总要的类是Ext.tree.TreeLoader
一、创建加载类
树加载器(TreeLoader)的目的是从URL延迟加载树节点Ext.tree.TreeNode的子节点。返回值必须是以树格式的javascript数组。例:

var loader = new Ext.tree.TreeLoader({
				dataUrl : 'getCourtTree.action',
				//这里如果不用侦听默认传node
				listeners : {
					"beforeload" : function(treeLoader, node){
						this.baseParams.levelCode = node.attributes.levelCode;
					}
				}
});

向服务端发送请求后,只有当展开时才会读取子节点信息。需要取值的节点id被传到服务端并用于产生正确子节点。当需要传递更多的参数时,可以把一个事件句柄邦定在"beforeload"事件上,然后把数据放到TreeLoader的baseParams属性上:如上所示。

二、创建根节点

var root = new Ext.tree.AsyncTreeNode({
	id : 'root'
});


三、创建一棵树

var tree = new Ext.tree.TreePanel({
		id:'vodTree',
		title : "树菜单",
		cls:'text_align_left',
		lines : true, 
		// 隐藏根节点
		rootVisible : false,
		height:400,
		width : 200,
		bodyStyle :'overflow-x:visible; overflow-y:visible;background-color:#F2F7FE;',
		root : root,
		loader : loader
});
	
root.expand(false, false);
那后台的处理方式是怎么样的呢,
我们只需要定义nodeid = request.getParameter("node");就会获得前台传过来的值,之后的处理我想大家就能继续了。试试吧。如有问题给我留言。







评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值