Ext-Tree 设计与实现

前端之家收集整理的这篇文章主要介绍了Ext-Tree 设计与实现前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

一、静态树

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

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

二、动态异步树

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

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

异步树前端JS实现过程:

异步树后台实现过程:

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

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

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

原文链接:https://www.f2er.com/ajax/166887.html

猜你在找的Ajax相关文章