Ext-Tree 设计与实现

在项目开发中,我们会经常用到一种数据结构—树。”树”这种数据结构名称的灵感完全来自自然界的树,在计算机中,树是倒着长的,根在上,叶子在下。

下面来介绍下,在使用ExtJs进行实际项目开发过程中,怎样才能构建一颗树,其中分为静态树和动态异步树两种类型。如图所示

一、静态树

以上TreePanel提供了树形结构数据的树形UI展示。添加到TreePanel中的每个TreeNode都可以包含你的程序中需要使用的元数据(metadata),这些数据被包含在它们的 attribute属性中。

这样一颗简单的静态树型结构就构造完成了。接下来需要实现像ExtJs-Api那样进行关键字的快速检索,请看下面的代码。

二、动态异步树

ExtJs是典型的Ajax框架,下面就来体现下异步加载树的魅力吧!

首先我们来看下异步树加载时候特点。使用fireBug对运行过程进行检测。如图所示,当每点一个节点,都会进行一次服务器访问的请求。

异步树前端JS实现过程:

异步树后台实现过程:

下面主要看下web层的实现代码,Service、Dao层就不做具体详解。

通过buildTree这个function在服务器端构造出我们想要的树形结构出来。

注意:(在此我们还需要在数据库建立一张树形结构的Table,这个将另外介绍,本节不做过度阐释)

相关文章

$.AJAX()方法中的PROCESSDATA参数 在使用jQuery的$.ajax()方...
form表单提交的几种方式 表单提交方式一:直接利用form表单提...
文章浏览阅读1.3k次。AJAX的无刷新机制使得在注册系统中对于...
文章浏览阅读1.2k次。 本文将解释如何使用AJAX和JSON分析器在...
文章浏览阅读2.2k次。/************************** 创建XML...
文章浏览阅读3.7k次。在ajax应用中,通常一个页面要同时发送...