`

基于Ext异步加载tree的实例

阅读更多

使用JS生成树形结构的菜单是基于J2EE的B/S系统常用的UI方式。但长期以来的问题是同步(即一次加载整棵树)加载一棵完整的树给前台及后台同时带来压力,由于加载数据及渲染时间过长使用户体验度很低。Ajax的异步数据传输方式是解决此问题的较好方式,即每次只加载一层节点,当需要时才加载下级节点,这样页面无需一次加载解决了此问题。

Ext的TreePanel组件提供了此功能即异步树(asynchronism tree),使用其实现需以下两步:

  • 后台数据加载的实现,并以JSON形式提供给前台。
  • 前台Ext的Tree组件实现。

实现预览:

 


1. 首先是JavaBean的节点模型(Tree Node Model):

/**
 * Method: 异步加载树型结点<br>
 * Origin Time: 2008-8-15 下午03:56:28<br>
 * 
 * @author Seraph<br>
 * @email: seraph115@gmail.com<br>
 */
public class AsyncTreeNode {

	private String id;

	private String text; // 结点显示名称

	private boolean leaf; // 是否为叶子结点

	private boolean disabled; // 是否可用

	private String cls; // 显示的样式,file、folder

	private String iconCls; // 结点图标样式

	private String href; // 点击后时的链接

	private String hrefTarget; // 在何frame中显示

	private boolean draggable; // 是否可拖拽

        // Omit the get and set method
        ... ...
}



数据库中的表结构:

 

COLUMN_NAME
DATA_TYPE
ID NUMBER
PARENT
NUMBER
TEXT VARCHAR2
LEAF VARCHAR2
DISABLED VARCHAR2
CLS
VARCHAR2
ICON_CLS
VARCHAR2
HREF
VARCHAR2
HREF_TARGET

VARCHAR2

 

取下级节点的接口定义:

 

	/**
	 * Method: 获取异步加载树型子结点<br>
	 * Author: Seraph<br>
	 * Origin Time: 2008-9-9 下午05:46:02<br>
	 * 
	 * @param menuId 当前结点的id
	 * @return 下级节点组成的List
	 */
	public List getLowerTreeNodes(String menuId);

 

数据提供的Spring的Controller:

 

/**
 * Method:<br>
 * Origin Time: 2008-8-15 上午11:07:55<br>
 * @author Seraph<br>
 * @email: seraph115@gmail.com<br>
 */
public class AsyncTreeProviderController extends JsonProviderController {

	private TreeManager treeManager;
	
	public void setTreeManager(TreeManager treeManager) {
		this.treeManager = treeManager;
	}

	protected ModelAndView handleRequestInternal(HttpServletRequest request,
			HttpServletResponse response) throws Exception {

		String rootId = request.getParameter("id");
		List list = treeManager.getLowerTreeNodes(rootId);
		
		super.pushJsonResponse(response, list);

		return null;
	}

}

  此步将查询到的下级结点的List<AsyncTreeNode>转换为JSON数据通过Ajax方式返回给Ext的TreePanel组件用以渲染下级结点。

 

PS: 推荐使用json-lib来转换javabean为json数据。下面是json-lib的maven的dependency。

 

        <dependency>
            <groupId>net.sf.json-lib</groupId>
            <artifactId>json-lib</artifactId>
            <version>2.2.2</version>
        </dependency>

 

 

2. JavaScript的Ext TreePanel组件实现:

 

/**
 * async-tree.js Power by YUI-EXT and JSON.
 * 
 * @author Seraph
 * @email seraph115@gmail.com
 */
 
var AsyncTree = { 
	author: "Seraph",
	version: "0.1.0"
};

// -> Configuration of tree. e.g: CG[1]
var CG = {
	1: "asyncTreeProvider.do",
	2: "async"
};

// -> Root-node name in Chinese. e.g: CN[1]
var CN = {
	1: "菜单",
	2: "配置"
};

// -> Root-node ID of tree. e.g: ID[1]
var ID = {
	1: "-1",
	2: "-2"
};

Ext.onReady(function(){
	
		var Tree = Ext.tree;
    
    	var myTreeLoader = new Ext.tree.TreeLoader({
    		url: CG[1]
    	});
   
   	    myTreeLoader.on("beforeload", function(treeLoader, node) {
        		myTreeLoader.baseParams.id = node.attributes.id;
    		}, myTreeLoader);
   
	    var tree = new Tree.TreePanel({
	        el:'tree1',
	        autoScroll:true,
	     	autoHeight: true,
			border: false,
	        animate:true,
	        enableDD:true,
	        rootVisible:false,
	        containerScroll: true,
	        loader: myTreeLoader,
	        root: {
	            nodeType: CG[2],
	            text: CN[1],
	            id: ID[1]
        	}
	    });
	    tree.render();
	    tree.getRootNode().expand();
	    
	});

 

 

 

10
1
分享到:
评论

相关推荐

    Ext.ux.tree.treegrid异步加载

    ### Ext.ux.tree.TreeGrid 异步加载知识点详解 #### 一、Ext.ux.tree.TreeGrid简介 在ExtJS框架中,`Ext.ux.tree.TreeGrid`组件是一种结合了树形结构与表格显示特性的控件,适用于展示具有层级关系的数据。通过...

    EXT tree 使用 实例 最新

    7. **加载和异步操作**:EXT Tree支持懒加载,即只有在需要时才从服务器请求子节点数据,这通过`loader`配置实现。异步加载减少了初始页面加载的时间。 8. **扩展和插件**:EXT Tree有丰富的扩展和插件,如`...

    Ext.tree.TreeLoader附带封装的json类

    `Ext.tree.TreeLoader`是Ext JS库中的一个组件,它负责加载和解析树形结构的数据,而JSON(JavaScript Object Notation)则是一种轻量级的数据交换格式,非常适合于在服务器和客户端之间传输数据。我们将通过实例...

    DWR方式动态加载EXT.Tree

    在客户端,我们需要创建一个EXT TreePanel实例,并设置其配置项。这些配置项包括但不限于: 1. `root`:定义树的根节点,可以是一个包含数据的对象,或者一个函数,用于动态加载数据。 2. `loader`:加载器配置,...

    Ext Tree示例

    这些文件很可能是用来演示如何创建和操作 Ext Tree 的实例。 首先,让我们了解 Ext Tree 的基本概念。Ext Tree 是一个可交互的、具有拖放功能的树形视图,可以用来显示数据的层级关系。每个节点(TreeNode)都可以...

    extTree例子点击出现等

    通过`loader`配置项,可以指定一个`Ext.data.TreeLoader`实例,该实例负责根据需要动态加载节点数据。 7. **Drag and Drop**: `TreePanel`支持拖放操作,允许用户重新排列节点或执行其他基于拖放的操作。这需要配置...

    EXT 中文手册 用实例来说话

    这份"EXT 中文手册 用实例来说话"是EXTJS初学者和开发者的重要参考资料,它通过实例化的方式深入浅出地讲解EXTJS的核心概念和技术。 EXTJS 的核心组件包括窗口(Window)、面板(Panel)、表格(Grid)、表单(Form...

    EXT_JS实例,官方实例

    EXT_JS是一种基于JavaScript的开源富客户端框架,专为构建交互式、数据驱动的Web应用程序而设计。EXT JS的核心是EXT Core,它提供了一套高级的DOM操作和事件处理功能。EXT JS实例通常包括一系列预定义的组件、布局、...

    ExtJs3.* 分页树 Ext.ux.tree.PagingTreeLoader

    要使用`Ext.ux.tree.PagingTreeLoader`,你需要配置一个`TreePanel`,并设置其`loader`属性为`PagingTreeLoader`实例。这个加载器需要与一个支持分页的服务器端接口配合,该接口能够根据请求的页码和每页大小返回...

    ext 实例 示例 实例 示例

    4. **动态加载数据**:如果你的数据量很大,可以采用异步加载,即在节点被展开时才加载其子节点数据。这可以通过配置store 的proxy 和model 来实现。 5. **自定义节点模板**:EXTJS 允许你自定义节点的展示样式,...

    ext 动态加载的树源码

    7. **异步与同步加载**:EXT树支持异步和同步两种加载方式。异步加载更常见,它在后台进行,不会阻塞用户界面。同步加载则会等待数据加载完成后再更新界面,一般只在数据量较小或有特定需求时使用。 8. **优化技巧*...

    treepanel实例

    **Ext Tree Panel 实例详解** 在Web开发中,Ext JS是一个强大的JavaScript库,它提供了丰富的用户界面组件,其中Tree Panel是用于展示树形结构数据的重要组件。本文将深入讲解`Treepanel`的使用,包括其基本概念、...

    ext实例综合

    例如,EXT Grid允许你创建数据密集型表格,EXT Form提供了一套完整的表单控件,EXT Tree则用于展示层次结构的数据。 2. **布局管理**:EXT的布局系统允许你灵活地组织组件,适应不同的屏幕尺寸和需求。常见的布局有...

    官方Ext3.0实例包

    1. 基于组件的架构:Ext3.0采用模块化设计,每个UI元素都是一个独立的组件,如面板、表格、表单等,方便复用和组合,提高了开发效率。 2. 强大的数据绑定:通过Data Package,Ext3.0支持与后台数据的双向绑定,能够...

    Ext解析XML实例

    如果是URL,则通过`Ext.data.HttpProxy`异步加载XML数据,并在数据加载完成后构建树形结构。 ##### 步骤三:从XML元素构建树节点 ```javascript function treeNodeFromXml(XmlEl) { var t = ((XmlEl.nodeType == 3...

    Ext学习必备,涵盖大量实例,插件,其他有用组件

    这个包是在之前包的基础上多加了很多功能。 原来的内容: 1ext2.2源码及例子 2深入浅出extJs例子 3自己写的例子 ...3新增EXT异步加载树 4动态修改树节点图标和提示层 5ext结合mxGraph作出流程图编辑器

    EXT 3.2.1 Demo 最全实例

    5. **树形视图(Tree)**:EXT JS提供了树形结构的组件,可以用于展现层级关系的数据,支持节点的展开、折叠、拖放等操作。 6. **图表(Charts)**:EXT JS 3.2.1包含了一套图表组件,支持折线图、柱状图、饼图等...

    EXT TreeFilter 插件

    EXT TreeFilter插件是EXT库中的一个强大工具,主要用于增强EXT的Tree组件的功能,特别是针对树形结构数据的快速搜索和过滤。EXT Tree是EXT框架中用于展示层次结构数据的组件,它通常用于构建具有多级目录结构的应用...

    在VS下利用Ext4.2的TreePanel的简单demo

    本文将深入探讨如何基于Ext4.2版本实现一个简单的TreePanel demo,结合数据库进行后台的数据操作,包括增、删、改、查功能。这对于初学者来说是一个很好的起点,能够帮助理解如何将前端UI与后端数据服务相结合。 ...

    解析Xml构建Ext树形菜单

    4. **创建树形菜单**:接下来,创建一个`Ext.tree.Panel`实例,指定store和root配置。`rootVisible`参数决定是否显示根节点,`displayField`则是显示节点时使用的字段: ```javascript var tree = new Ext.tree....

Global site tag (gtag.js) - Google Analytics