ExtJS 异步加载树

最新推荐文章于 2025-06-10 16:45:00 发布

原创最新推荐文章于 2025-06-10 16:45:00 发布 · 3.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#extjs #javascript #function #tree #url

Javascript 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何在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");就会获得前台传过来的值，之后的处理我想大家就能继续了。试试吧。如有问题给我留言。