BlogJava-beauty_beast-随笔分类-J2EEhttp://www.blogjava.net/beauty_beast/category/7388.html上善若水 厚德载物 zh-cnWed, 28 Feb 2007 08:18:15 GMTWed, 28 Feb 2007 08:18:15 GMT60树型控件http://www.blogjava.net/beauty_beast/archive/2006/02/23/32111.html柳随风柳随风Thu, 23 Feb 2006 08:00:00 GMThttp://www.blogjava.net/beauty_beast/archive/2006/02/23/32111.htmlhttp://www.blogjava.net/beauty_beast/comments/32111.htmlhttp://www.blogjava.net/beauty_beast/archive/2006/02/23/32111.html#Feedback14http://www.blogjava.net/beauty_beast/comments/commentRss/32111.htmlhttp://www.blogjava.net/beauty_beast/services/trackbacks/32111.html1、主要功能：
a、只支持数据库方式
b、支持一次装载所有节点（适合数据量较小，节点数低于2000个）
动态装载任意节点以及一层子节点（适合数据量较多的情况，在页面动态加载）
c、支持设置是否要动态刷新
d、显示标注选择节点状态
e、理论支持应用中可以使用多个树型控件

2、主要采用的技术
a、javascript,xmlhttp，DOM
b、velocity模板
c、通过div显示/隐藏节点内容
3、核心算法
递归算法
4、树型控件的实现步骤
一次装载所有节点
a、根据动态数据封装层次节点对象列表
b、将对应的层次节点对象列表转换为javsscript中层次节点对象列表 (采用生成JS文件的方式)
c、根据javsscript中层次节点对象动态生成Html
动态装载任意节点
初始装载时和一次装载类似，不过一次只装载本身节点和子节点数据。
当页面点击节点时，
a、根据动态数据封装本身节点和子节点对象列表（采用了xmlhttp技术）
b、根据点击节点对象动态增加相关节点的Html（采用了velocity模板技术）

5、主要对象以及资源文件介绍
依赖jar: log4j-1.2.8.jar、velocity-dep-1.4.jar，数据库驱动


Configuration.java 配置文件管理类
DbHelper.java 数据库连接帮助类
VelocityEngineFactory.java 模板引擎工厂类
tree.properties JDBC配置、JNDI配置、是否采用DATASOURCE、js生成文件路径、velocity模板文件路径
velocotiy.properties 设置字符集以及模板路径
Node.java 从实现步骤看出是核心的数据对象类，主要属性 节点id(关键字）、节点名称、节点对应url、
节点状态（控制节点是否显示）、父节点id、子节点数组、节点类型（枝节点还是叶节点）
从节点类可以看出相对应的表结构：
create table TREE_NODE
(
NODEID VARCHAR2(32) not null,
NODENAME VARCHAR2(64),
NODEURL VARCHAR2(1000),
PARENTID VARCHAR2(32),
STATUS VARCHAR2(10) default 'closed'
)
alter table TREE_NODE add constraint PK_TREE_NODE primary key (NODEID)
可以通过创建同名的视图将相关展现的表结构转换。

TreeBuilder.java 这是整个树型控件实现的核心类，是个抽象类

抽象方法（具体实现方式有可能是XML,数据库等）：
public abstract Node[] getAllNodes();
获取所有的节点数组
public abstract Node getNodeById(String id);
根据关键字获取节点对象
public abstract Node[] getRelationNodes(String parentId);
根据节点id获取其关联的相关子节点以及自身的节点数组
public String getSearchNodeHTML(String id, int splitlength)
根据节点id生成对应的页面html字符串（动态载入，需要有对应的模板文件。实现步骤b）
public void createJSFile(String oriFileName, boolean isRecreate)
生成js文件,可控制是否重新创建,遍历的方法主要顺序如下：
createJSFile-->generateScript-->buildTree
-->createJSByRecursion
其他的方法可参考相关注释
DBTreeBuilder是TreeBuilder的子类，实现了TreeBuilder相关的抽象方法。

整体功能还没有完全开发完毕，原先设计考虑是还有一个工场类 可以控制根据不同的场景调用不同的DBTreeBuilder类，这样可以实现应用中可以使用多个树型控件，多个时相关的生成JS文件有性能瓶颈也要做调整.等有时间再完善。
客户端相关核心代码 tree.js和synctree.js
两者唯一的区别就是是否var isAsync=false|true
该js文件完成客户端节点对象的构造、相关图片配置、根据生成的js文件展现树型结构，以及页面点击事件的处理

整个页面的调用过程如下：
请求页面创建 DBTreeBuilder实例，根据实际需要动态刷新创建相对应的节点js文件，然后在请求页面中装载相对应的tree.js和
节点js文件，通过tree.js中的printTree函数构造整个树，最后页面输出整个树。
如果是动态装载的树，用户实际点击某个节点时，通过xmlhttp向server发出请求，通过传递过来的节点参数，通过'getSearchNodeHTML'方法根据相关的模板生成相对应的节点字符串，根据请求返回的字符串，动态改变点击节点对应的div对象内的html内容。

代码中
dispaly.jsp为一次装载的例子
sync.html 为动态装载的例子
如有兴趣可以和我联系，代码量1000多行。

今天看了有很多感兴趣的同行，比较意外，索性让有兴趣的人下载
http://www.blogjava.net/Files/beauty_beast/project_tree_pub.rar
为了节省文件空间，lib库中只保留了velocity-dep-1.4.jar,其他的jar包比较通用，大家自己找相关jar,运行的例子中的WEB_INF/lib库也要加入。
运行例子要求：
1、生成数据库脚本
2、修改配置文件相关信息
说明：相关代码未经充分测试，仅供交流。





柳随风 2006-02-23 16:00 发表评论
]]>