树组件：异步树范例

最新推荐文章于 2023-05-11 10:13:19 发布

yue2008

最新推荐文章于 2023-05-11 10:13:19 发布

阅读量227

点赞数

CC 4.0 BY-SA版权

分类专栏： ExtJS_3.0 文章标签： EXT

本文链接：https://blog.youkuaiyun.com/yue2008/article/details/83632391

ExtJS_3.0 专栏收录该内容

35 篇文章

订阅专栏

本文展示了如何在JavaScript中使用ExtJS框架异步加载树节点，并通过请求服务器URL地址来获取自定义参数值，同时实现了节点的重新加载与自定义属性值的获取。此外，介绍了后台Struts2框架如何解析并处理这些参数值，以及子节点数据的获取方式。

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

1、范例主要展示以下功能点：

树节点通过请求服务器URL地址获得

请求附加自定义参数值

重新加载树节点的子节点

节点附件自定义属性值

2、范例源码

Ext.onReady(function(){
	Ext.BLANK_IMAGE_URL = "../widgets/ext-3.0/resources/images/default/s.gif";
	Ext.QuickTips.init(); 
	
	var tree = new Ext.tree.TreePanel({
		title: "异步加载树节点",
		renderTo: Ext.getBody(),
		width: 300,
		height: 300,
		
		useArrows: true,
		rootVisible: false,
		/*
		root: new Ext.tree.AsyncTreeNode({
			id: "root",
			text: "根节点",
			expanded: true
		}),
		*/
		root: {
			nodeType: "async",
			id: "root",
			text: "根节点",
			expanded: true
		},
		tbar: [
			{
				text: "重新加载",
				handler: function(){
					var loader = tree.getLoader();
					var node = tree.getNodeById("1_2");
					loader.load(node); //重新加载树节点的子节点
					node.expand(); //展开树节点
				}
			}
		],
		loader: new Ext.tree.TreeLoader({
			dataUrl: "../tree-loader.action",
			baseAttrs: {
				username: "cjm"
			},
			baseParams: {
				password: "cjm"
			},
			listeners: {
				"beforeload": function(loader, node){
					loader.baseParams.nodeText = node.text; //将节点属性值作为请求参数值发送
				}
			}
		}),
		listeners: {
			"click": function(node, event){
				//alert(node.attributes.username); //获取附加的属性值
			}
		}
	});
	
	//节点编辑
	new Ext.tree.TreeEditor(tree);
	
	//节点排序
	new Ext.tree.TreeSorter(tree, {
		folderSort: true,
		property: "id",
		dir: "asc"
	});
});

3、后台获取参数值（struts2）

//获取节点的id值
String nodeId = ServletActionContext.getRequest().getParameter("node");

//获取附加的参数值
String password = ServletActionContext.getRequest().getParameter("password");
String nodeText = ServletActionContext.getRequest().getParameter("nodeText");

4、子节点数据

<%@ page language="java" pageEncoding="UTF-8"%>
<%
	String id = request.getParameter("node");
%>

<% if("root".equals(id)){ %>
[
	{id:"1", text:"node1", leaf:false},
	{id:"2", text:"node2", leaf:true}
]
<% } %>

<% if("1".equals(id)){ %>
[
	{id:"1_1", text:"node1_1", leaf:true},
	{id:"1_2", text:"node1_2", children: [
		{id:"1_2_1", text:"node1_2_1", leaf:true}
	]}
]
<% } %>