项目有个需求需要写个类似 windows资源管理器的树结构。
一开始想偷懒到网上随便找段代码,可是找下来看了半天还没看懂。要是去一行一行的读源码去理解的话,就违背了偷懒的初衷,而且估计都满足不了需求~~于是DIY一个。
需求:
1)减轻数据库压力,访问一次数据库(只执行一条select * from 表名)便要读出所有树结构;
2)排序,目录要优先于结点显示在树形结构中,同级同种结点排序按填入的排序号大小来排序
3)有个界面可以随时增加、编辑、删除树的结点或目录。
于是花了一天时间把这个搞定了~~自我感觉还比较满意,因此把关键的代码贴上来共享下,有兴趣有经验的朋友请多教。
效果如下:
环境:webwork/spring/hibernate/extjs-json-tree
数据库表:
mid number Not null 目录id,编号,唯一
mname varchar2(30) Not null 目录名
pid number Not null 父目录id,顶级目录默认为0
pname String(30) 父目录名称
mtype char 是目录还是结点,'dir' or 'rpt'
leveidx number 同级目录中的排列顺序
state String(10) (一个业务字段,无关紧要)
reptid String(30) (一个业务字段,无关紧要)
bz String(100) (一个业务字段,无关紧要)
HibernateSynchronizer生成hbm.xml、DAO、pojo
web.xml中增加spring监听器将DAO自动注入至webwork的action
“界面可以随时增加、编辑、删除树的结点或目录”。就是一个普通的crud操作,地球人都会写,代码忽略。
EXTJS呈现,代码很短,就是请求一个action,返回一串json并解析该JSON为一棵树,不是关键,可以忽略。也将代码贴出来吧,AJAX请求的地址是sysrMenutreeAction!gettree.action
Ext.onReady(function(){
var loader = new Ext.tree.TreeLoader({url:"sysrMenutreeAction!gettree.action"});
loader.processResponse = function(response, node, callback){
var json = response.responseText;
try{
var json = eval("(" + json + ")");
node.beginUpdate();
var o = json["key"];
for(var i=0, len=o.length; i<len; i++){
var n = this.createNode(o[i]);
if(n){
node.appendChild(n);
}
}
node.endUpdate();
if(typeof callback == "function"){
callback(this,node);
}
}catch(e){
this.handleFailure(response);
}
}
var tree = new Ext.tree.TreePanel({
el : 'tree',
loader : loader,
border :false
});
var root = new Ext.tree.AsyncTreeNode({
id : '1',
text : "根结点"
});
tree.setRootNode(root);
tree.on("click", function(node){
top.mainFrame.location = "sysrMenutreeAction!getnode.action?node=" + node.id; //在主frame中显示结点的具体信息
});
tree.render();
});
上面请求的sysrMenutreeAction!gettree.action,在对应的action中对应的gettree()方法如下:
public String gettree() {
List<SysrMenutree> list = sysrMenutreeDAO.getSession()
.createQuery("from SysrMenutree ").list(); //执行查询,取得所有记录
Map<Integer, SysrMenutree> map = new HashMap<Integer, SysrMenutree>();
SysrMenutree root = null; //根结点
for (SysrMenutree treeNode : list) { //第一次循环,将结果集放到一个"Map键-值对"结构中,方便取出指定元素
map.put(treeNode.getId(), treeNode);
if(treeNode.getPid() == 0){
root = treeNode;
}
}
/*
第二次循环所有结点,将每个结点的子结点存入一个TreeSet中。
使用TreeSet比较关键,我的排序的代码全写在这个TreeSet的Comparator中,见下文
*/
for(SysrMenutree treeNode : list){
if(treeNode.getPid() != 0){
map.get(treeNode.getPid()).addChild(treeNode);
}
}
System.out.println(root.toJsonString());
HttpServletResponse response = ServletActionContext.getResponse();
response.setContentType("application/x-json;charset=utf-8");
try {
PrintWriter out = response.getWriter();
if(root != null){
out.write("{key:[" + root.toJsonString() + "]}"); //向客户端写json。递归方法toJsonString()
}
out.flush();
} catch (IOException e) {
e.printStackTrace();
}
return NONE;
}
关键的代码在pojo对象SysrMenutree中。如下:
public class SysrMenutree implements Comparable<SysrMenutree> {
//实现了Comparable接口
/*
........
省略pojo属性以及对应的getter/setter
*/
private Set<SysrMenutree> children = new TreeSet<SysrMenutree>(
new Comparator<SysrMenutree>() { //匿名内部类实现Comparator接口
public int compare(SysrMenutree o1, SysrMenutree o2) {
return -o1.compareTo(o2);
}
});
public void addChild(SysrMenutree node) {
children.add(node);
}
public String toJsonString() {
StringBuffer buf = new StringBuffer();
buf.append("{ id : " + getId() + ", text : '" + this.getMname()
+ "', ");
if (children.size() > 0) {
buf.append("children : [");
for (SysrMenutree node : children) {
buf.append(node.toJsonString() + ","); //对子结点递归
}
buf.deleteCharAt(buf.length() - 1);
buf.append("]}");
} else {
/*
如果不定义leaf=true,EXTJS就认为那是一个目录并以文件夹的图标显示。
但是如果没子结点,则会进入一个死循环。
因此在这里做特殊处理:
如果没有子结点,就设置leaf为true,但对数据库中标识为"dir"目录的结点,就指定显示图标为文件夹。
*/
if (this.getMtype().equals("dir")) {
buf.append("icon : 'folder.gif', ");
}
buf.append("leaf : true }");
}
return buf.toString();
}
public int compareTo(SysrMenutree o) { //Comparable接口具体实现
if (getMtype().equals(o.getMtype())) {
return this.getLeveidx() > o.getLeveidx() ? 1
: (this.getLeveidx() == o.getLeveidx() ? 0 : -1);
} else if (getMtype().equals("dir")) {
return 1;
} else {
return -1;
}
}
}
- 大小: 100.3 KB
分享到:
- 2009-07-08 15:35
- 浏览 4104
- 评论(8)
- 论坛回复 / 浏览 (8 / 7076)
- 查看更多
相关推荐
**ExtJS动态树与数据库交互详解** 在Web开发中,数据可视化是不可或缺的一部分,而树形结构作为一种层次清晰、组织有序的数据展现方式,被广泛应用于菜单系统、文件目录、组织架构等场景。ExtJS,一个强大的...
这个压缩包文件的内容看起来是一个完整的EXTJS项目,包含了数据库交互、动态树结构和菜单功能,并且集成了SpringMVC后端框架以及JDBC数据访问层。 1. **EXTJS动态树**: EXTJS的动态树(TreePanel)组件允许开发者...
在EXTJS中,目录树(TreePanel)是一种常见且强大的组件,用于展示层次结构的数据,如文件系统、组织结构或数据库表的层级关系。 目录树编辑功能是指EXTJS中允许用户对树形结构进行动态操作,包括添加、删除、修改...
第一讲:extjs4.0概述和HELLO WORD程序 [01]EXTJS4.0的概述和HELLOWORD程序.wmv 第二讲:extjs4.0的新特性(附件较大做了分包压缩大家只要下载3个包运行001就ok了) [02]EXTJS4.0的新特性.003.zip (14.41M)[02]...
8. **搜索性能优化**:在处理大量数据时,可以考虑对树进行分页,或者在搜索时只过滤可视部分的节点,而不是整个树。 9. **事件监听**:EXTJS提供了丰富的事件系统,如beforefilter、filter、load等,可以通过监听...
异步加载,也称为懒加载或需求加载,意味着当用户滚动、展开节点或者进行其他交互时,只加载当前需要的数据,而不是一次性加载整个树。这在处理大量数据或深层级结构时特别有用,因为它减少了初次加载时的网络传输量...
在给定的“Extjs树Demo”中,我们将探讨如何使用ExtJS实现树形结构,这是一种常见的数据可视化方式,用于表示层次结构的数据。 首先,理解ExtJS中的树(Tree)组件是非常重要的。这个组件允许开发者创建可交互、多...
EXTJS 2.0是Sencha公司开发的一款用于构建富客户端Web应用的JavaScript库,它在Web开发领域具有广泛的应用。EXTJS的核心特性包括组件化、数据绑定、强大的表格和图表功能、丰富的用户界面组件以及对Ajax技术的深度...
在本文中,我们将深入探讨如何使用ExtJS框架来实现自定义树结构以及动态表头的功能。ExtJS是一款强大的JavaScript库,常用于构建富客户端应用程序,它提供了丰富的UI组件和强大的数据绑定机制。VS2015是Visual ...
Extjs教程源码 介: ***************第一部分基础知识**************** 第一讲: EXTJS4.0概述和HelloWorld程序 第二讲: EXTJS4.0的新特性 第三讲: EXTJS4.0数据模型——Model 第四讲: EXTJS4.0的数据代理——Proxy ...
使用java,extjs,配合后台oracle数据库的代码框架,这段代码是extjs的grid的一个详细案例使用java,extjs,配合后台oracle数据库的代码框架,这段代码是extjs的grid的一个详细案例使用java,extjs,配合后台oracle...
在“ExtJs 连接数据库并且生成动态树”这个主题中,我们将探讨如何利用ExtJs来连接后端数据库,并动态生成树形结构来展示数据。 首先,要实现ExtJs连接数据库,你需要一个服务器端的数据接口,它可以是基于PHP、...
在IT行业中,ExtJS是一个广泛使用的JavaScript框架,用于构建富客户端Web应用程序。它提供了一整套组件库,包括数据绑定、布局管理、图表以及我们关注的树形视图。"Extjs 无限树菜单 后台拼接json"这个主题涉及到...
总的来说,这段代码展示了如何在EXTJS中创建一个具有拖放、动画效果、可折叠和多级节点的树形结构,并且实现了节点选中状态的级联更新。这种树形结构常用于展示具有层次关系的数据,例如组织结构、文件系统或菜单等...
EXTJS 是一个强大的JavaScript前端框架,它主要用于构建富客户端应用,提供丰富的用户界面组件和灵活的可定制性。EXTJS 的核心在于其组件化的架构,允许开发者构建复杂的UI布局和功能丰富的应用程序。以下是对EXTJS...
EXTJS树控件是EXTJS库中的一个组件,用于创建具有层级关系的数据展示。在本文档中,我们将探讨如何利用EXTJS实现动态树,包括添加、编辑和拖拽功能,以及与后台数据的同步。 首先,EXTJS动态树的实现依赖于几个关键...
在开发过程中,有时需要根据数据库结构或者业务需求自动生成相应的ExtJS代码,以提高开发效率和代码一致性。下面将详细解释如何使用ExtJS进行代码自动生成,以及各组件类型的中文解释。 1. **数据库字段的映射** ...
ExtJS 是一个强大的JavaScript 框架,专用于构建富客户端Web应用程序。它提供了一整套组件库,包括用于创建复杂布局、数据绑定、图表以及我们关注的“动态树”功能。动态树(Dynamic Tree)是指在运行时可以动态加载...
EXTJS是一种强大的JavaScript框架,专为构建富互联网应用程序(Rich Internet Applications,简称RIA)而设计。它提供了丰富的组件库,可以构建出具有桌面应用程序般用户体验的Web应用。EXTJS的核心特性包括数据绑定...