`

EXT4动态树

 
阅读更多

EXT JS4.0树的生成和加载与EXT3.0相比做了比较大的改动,层次比较分明,先是加载TreeStore,然后加载TreePanel,并把TreeStore的值传给TreePanel。但是这种加载方式没有Ext Js3.0的加载方式灵活,监听起来也没那么方便。早段时间做了个从后台传值并生成动态树的功能,给大家参考参考。

 

前端js代码:

 

 

//创建静态树
function createXxTrees(){
	
	var xxMenuArr = [{
				text: "XXX管理",
				expanded: false,
				iconCls:"leftMenuIcon",
				icon:"images/node/utcs/folder.jpg",
				children: [{
					text: "服务器管理",
					iconCls:"leftMenuIcon",
					icon:"images/node/utcs/bianji.png",
					leaf: true
				},{
					text: "域管理",
					iconCls:"leftMenuIcon",
					icon:"images/node/utcs/bianji.png",
					leaf: true
				},{
					text: "节点管理",
					iconCls:"leftMenuIcon",
					icon:"images/node/utcs/bianji.png",
					leaf: true
				}
				]
			}
			];
	
	//动态树生成
	Ext.Ajax.request({
		url : 'XxTreeAction.action',
		//params : {},
		success : function(response,returnValue)
		{
			
			var info = Ext.JSON.decode(response.responseText);
			var nodes = info.nodes;
			if(info.success){
				var nodeRoot = {
					text:"信号节点",
			        expanded: true,
					iconCls:"leftMenuIcon",
					icon:"images/node/utcs/folder.jpg",
			        children: nodes
			    }
				 xxMenuArr.push(nodeRoot);
			}
						
		},
		failure : function(response)
		{
    		
		},
		async: false   
	});
	
	
	xxTreeStore = Ext.create('Ext.data.TreeStore', {
		root: {
			expanded: true,
			children: xxMenuArr
		}
	});
	//显示树
if (Ext.getCmp(' xxTreePanel ') == null ) {
		Ext.create('Ext.tree.Panel', {
			id: 'xxTreePanel',
			width: leftMenuWidth,
			height: leftMenuHeight,
			store:  xxTreeStore ,
			rootVisible: false,
			renderTo: "xxDivId",//HTML的DIV Id
			listeners: {
				itemclick: function(view, record, element, index){

																			
				}
			}
		});
	}
			
}


	
 

 

后台XxTreeAction  execute方法代码:

 

 

 

	public String execute() throws Exception
	{
		List<TreeNode> serverTreeList = new ArrayList<TreeNode>();//服务器树节点列表
		List<TreeNode> childrenTreeList = new ArrayList<TreeNode>();
		try {

			List<KkServerInfo> serverInfoList = serverService.findAll();

			//遍历服务器
			for(int i=0;i<serverInfoList.size();i++){
				KkServerInfo serverInfo = serverInfoList.get(i);
				long serverId = serverInfo.getId();
				//设置服务器属性
				TreeNode serverTreeNode = new TreeNode();
				serverTreeNode.setText(serverInfo.getKkServerName());
				serverTreeNode.setId("s#"+serverInfo.getId());
				serverTreeNode.setCls("");
				serverTreeNode.setIconCls("leftMenuIcon");
				serverTreeNode.setIcon("images/node/utcs/server.jpg");
				serverTreeNode.setExpanded(true);
				//定义域的树节点
				List<TreeNode> areaTreaNodeList =  new ArrayList<TreeNode>();
				
				List<KkDomain> areaInfoList = areaService.selectKkAreaListByServerId(serverId);
				//遍历域
				for(int j=0;j<areaInfoList.size();j++){
					KkDomain areaInfo  = areaInfoList.get(j);
					long areaId = areaInfo.getId();
					//设置域节点属性
					TreeNode areaTreeNode = new TreeNode();
					areaTreeNode.setText(areaInfo.getName());
					areaTreeNode.setId("a#"+areaInfo.getId());
					areaTreeNode.setCls("");
					areaTreeNode.setIconCls("leftMenuIcon");
					areaTreeNode.setIcon("images/node/utcs/yu.jpg");
					areaTreeNode.setExpanded(false);

					//定义节点的树节点
					List<TreeNode> nodeTreeNodeList =  new ArrayList<TreeNode>();
					List<KkInfo> nodeInfoList = nodeService.selectKkInfoListByAreaId(areaId);
					
					//遍历节点
					for(int m=0;m<nodeInfoList.size();m++){
						KkInfo nodeInfo  = nodeInfoList.get(m);
						//设置节点属性
						TreeNode nodeTreeNode = new TreeNode();
						nodeTreeNode.setText(nodeInfo.getAddress());
						nodeTreeNode.setId("n#"+nodeInfo.getId());
						nodeTreeNode.setCls("");
						nodeTreeNode.setLeaf(true);
						nodeTreeNode.setIconCls("leftMenuIcon");
						nodeTreeNode.setIcon("images/node/kkcs/kkcs.png");

						nodeTreeNode.setChildren(childrenTreeList);

						nodeTreeNodeList.add(nodeTreeNode);

					}//end 遍历节点

					
					areaTreeNode.setChildren(nodeTreeNodeList);
					areaTreaNodeList.add(areaTreeNode);//添加域节点

				}//end  遍历域
				serverTreeNode.setChildren(areaTreaNodeList);
				serverTreeList.add(serverTreeNode);
			}//end 遍历服务器
			
			success = true;	
			
		} catch (Exception e) {
			e.printStackTrace();
			success = false;	
		}
			
		this.nodes = serverTreeList;
		return SUCCESS;
	}
 

 

NodeTree.java类:(封装了TreeStore 中树节点的属性)

 

 

 

import java.util.List;
/**
 * 动态树节点类
 * @author 林
 *
 */
public class TreeNode {

	private String text;
	private String id;
	private String cls;
	private boolean expanded; 
	private String iconCls;
	private String icon;
	private String href;
	private boolean leaf;
	private List<TreeNode> children;
	
	public String getIcon() {
		return icon;
	}
	public void setIcon(String icon) {
		this.icon = icon;
	}
	public String getHref() {
		return href;
	}
	public String getIconCls() {
		return iconCls;
	}
	public void setIconCls(String iconCls) {
		this.iconCls = iconCls;
	}
	public void setHref(String href) {
		this.href = href;
	}
	public boolean isLeaf() {
		return leaf;
	}
	public void setLeaf(boolean leaf) {
		this.leaf = leaf;
	}
	public List<TreeNode> getChildren() {
		return children;
	}
	public void setChildren(List<TreeNode> children) {
		this.children = children;
	}
	public boolean isExpanded() {
		return expanded;
	}
	public void setExpanded(boolean expanded) {
		this.expanded = expanded;
	}

	public String getText() {
		return text;
	}
	public void setText(String text) {
		this.text = text;
	}
	public String getId() {
		return id;
	}
	public void setId(String id) {
		this.id = id;
	}
	public String getCls() {
		return cls;
	}
	public void setCls(String cls) {
		this.cls = cls;
	}
	
}
分享到:
评论

相关推荐

    EXT2.0动态树,分页!

    在“EXT2.0动态树,分页!”这个项目中,我们可以看到EXT2.0如何被用来创建一个后台管理系统的动态树结构,并结合了分页功能,以提高用户体验和系统性能。 动态树结构是EXT2.0中的一个重要特性,它允许用户交互地...

    EXT构造动态树 包括增删改操作

    在提供的`动态树例子json`文件中,可能包含了上述提到的JSON数据结构,用于演示EXT如何处理动态树及各种操作。通过实际代码示例,我们可以更深入地理解EXT动态树的操作方式。在实践中,结合EXT的API文档和示例代码,...

    EXT动态树工程,例子学习

    在"EXT动态树工程,例子学习"中,我们将关注EXT中的一个重要组件——动态树。 动态树是一种数据可视化工具,它允许用户以树状结构展示数据。在EXT中,动态树常用于展示层级关系的数据,如文件系统、组织结构或者...

    Ext动态树中文API

    Ext动态树是基于Ext JS库的一个组件,用于创建交互式的、可动态更新的树形结构。这个组件在Web应用程序中非常有用,特别是在需要展示层级数据或者进行导航菜单设计时。Ext中文API为开发者提供了详细的使用指南和参考...

    ext 下拉树 ext2

    在描述中提到的“不错的下拉树,异步加载树节点”意味着这个组件具有高级功能,如动态、按需加载数据。在大型应用中,这种特性尤为重要,因为它可以提高页面的加载速度,只在用户需要时才加载相关的树节点数据,而...

    Ext TreePanel Checked Ext复选框树

    在描述中提到的"Ext TreePanel Checked Ext复选框树"是指`TreePanel`的一种特殊形式,它扩展了基本的树视图,加入了复选框功能。 复选框树(Checked Tree)允许用户通过复选框来选择或取消选择树结构中的节点。这种...

    Ext动态树的生成,后台是JSP

    在本场景中,我们将探讨如何结合两者来生成动态的树形结构,即Ext动态树。 首先,我们需要理解ExtJS中的树组件(TreePanel)。树组件提供了一种直观的方式来展示层次化的数据,它能够通过异步加载节点来优化性能。...

    Ext树创建说明.rar

    其中,“Ext树”(Ext Tree)是ExtJS中的一个重要组件,用于展示层级结构的数据,如文件系统、组织架构等。本文将深入探讨如何在ExtJS中创建一个树形视图。 首先,理解Ext树的基本结构至关重要。一个Ext树由节点...

    如何使用ext写的树形菜单

    在EXT中,实现树形菜单主要依赖于`Ext.tree.Panel`组件,这个组件用于展示层次结构的数据。 1. **树形菜单基础** 树形菜单是一种具有层级结构的界面元素,通常用于表示文件系统、组织结构或导航菜单。在EXT中,`...

    EXT+ASP动态生成树(XML)

    EXT.tree动态树是EXT JS中的一个核心组件,用于显示层次结构的数据。它支持多种功能,如展开/折叠节点、拖放操作、节点选择等。EXT.tree动态树的创建通常涉及以下步骤: 1. 引入EXT库:在HTML文件(如index.html)...

    ext 下拉树demo

    4. **TreePicker**:EXT中的下拉树组件可能基于Combobox(组合框)组件扩展,提供树形选择功能。它在初始状态下显示为一个输入框,当用户点击时展开为一个下拉树列表。 5. **配置项**:在创建TreePicker时,需要...

    Ext 动态树

    在Ext中,"动态树"是指能够根据需求实时生成或更新的树形结构组件。这种组件在数据管理、目录结构展示、层级关系表示等方面非常有用。下面我们将详细探讨Ext动态树的相关知识点。 首先,我们要理解Ext的树...

    Ext树例子

    4. 在页面上渲染树。 下面是一个简单的Ext树的例子代码片段,演示了如何创建一个基本的树: ```javascript Ext.application({ name: 'MyApp', launch: function () { // 加载数据源,这里假设tree1.txt是一个...

    ext 动态加载的树源码

    EXT树的动态加载能力是其一大亮点,它允许我们按需加载节点,从而减少初始页面加载时的数据量,提高应用性能。 在EXT树中,动态加载通常是通过使用`TreeLoader`类实现的。这个类负责从服务器获取子节点数据,当用户...

    Ext4.2可增删树例子

    Ext4.2可增删树例子是一个针对Ext框架的扩展,特别优化了对树形结构进行动态添加和删除节点的功能。在传统的Ext中,一旦树结构建立,其leaf属性(表示节点是否为叶子节点)通常是静态的,不易于在运行时进行修改。...

    ext 级联选择的树形控件

    5. **数据绑定**:树形控件的数据通常是动态加载的,EXT使用Store来管理这些数据,可以与服务器进行异步通信,更新或获取树的结构和状态。 6. **自定义渲染**:EXT允许开发者自定义节点的显示样式和行为,比如通过...

    ext2的可编辑树

    EXT文件系统家族是Linux系统中最常见的默认文件系统,每个版本都在前一个的基础上进行了改进和增强,如EXT3引入了日志记录功能,EXT4则进一步优化了性能和扩展性。 【压缩包子文件的文件名称列表】:tree1.jsp、js ...

    ext 关于树目录开发使用

    在实际应用中,我们经常需要将 Ext.js 与后端框架如 Spring 进行集成,以实现动态加载树结构数据的功能。下面的示例展示了如何使用 Spring MVC 和 Hibernate 实现这一点。 ```javascript var TreeTest = function ...

    ext 树控件+数据库

    在IT领域,EXT是一个流行的JavaScript库,用于构建富客户端应用程序,尤其在Web应用开发中广泛应用。...通过这种方式,你可以构建一个动态、交互性强的EXT树控件,有效地展示和操作数据库中的层次结构数据。

    ext利用js生成树

    4. **TreeStore**: TreeStore是专门用于树形数据的存储类,负责管理数据的加载、更新和排序。你需要定义TreeStore的model类型,并提供数据源。数据可以通过配置store的root属性来指定树的根节点。 5. **渲染和模板*...

Global site tag (gtag.js) - Google Analytics