在项目开发中,我们会经常用到一种数据结构—树。”树”这种数据结构名称的灵感完全来自自然界的树,在计算机中,树是倒着长的,根在上,叶子在下。
下面来介绍下,在使用ExtJs进行实际项目开发过程中,怎样才能构建一颗树,其中分为静态树和动态异步树两种类型。如图所示
一、静态树
以上TreePanel提供了树形结构数据的树形UI展示。添加到TreePanel中的每个TreeNode都可以包含你的程序中需要使用的元数据(metadata),这些数据被包含在它们的 attribute属性中。
这样一颗简单的静态树型结构就构造完成了。接下来需要实现像ExtJs-Api那样进行关键字的快速检索,请看下面的代码。
二、动态异步树
ExtJs是典型的Ajax框架,下面就来体现下异步加载树的魅力吧!
首先我们来看下异步树加载时候特点。使用fireBug对运行过程进行检测。如图所示,当每点一个节点,都会进行一次服务器访问的请求。
异步树前端JS实现过程:
异步树后台实现过程:
下面主要看下web层的实现代码,Service、Dao层就不做具体详解。
通过buildTree这个function在服务器端构造出我们想要的树形结构出来。
注意:(在此我们还需要在数据库建立一张树形结构的Table,这个将另外介绍,本节不做过度阐释)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。