Ext-Tree 设计与实现

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

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

 

一、静态树

 

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

 

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

 

 

 

二、动态异步树

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

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

 

异步树前端JS实现过程:

 

异步树后台实现过程：

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

 

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

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