Ext-Tree 设计与实现

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

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

一、静态树

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

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

二、动态异步树

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

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

异步树前端JS实现过程:

异步树后台实现过程:

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

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

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

相关文章

IE6是一个非常老旧的网页浏览器,虽然现在很少人再使用它,但...
PHP中的count()函数是用来计算数组或容器中元素的个数。这个...
使用 AJAX(Asynchronous JavaScript and XML)技术可以在不...
Ajax(Asynchronous JavaScript and XML)是一种用于改进网页...
本文将介绍如何通过AJAX下载Excel文件流。通过AJAX,我们可以...
Ajax是一种用于客户端和服务器之间的异步通信技术。通过Ajax...