Posted on 2006-02-23 16:00
柳随风 阅读(3802)
评论(18) 编辑 收藏 所属分类:
J2EE
关于树型控件相关的开源项目很多，但实际使用中总觉得使用的不是得心应手，在实际项目中也开发过相关的树型控件，去年用了几乎三周的时间，将相关控件设计、功能都做了一定的完善。和大家分享一下，大家在实际的开发使用中可以参考，做的比较匆忙，不妥之处，还请大家多指正。为了以后作调整走读代码时间快点，故写这篇文章，备忘。
1、主要功能：
a、只支持数据库方式b、支持一次装载所有节点（适合数据量较小，节点数低于2000个）动态装载任意节点以及一层子节点（适合数据量较多的情况，在页面动态加载）c、支持设置是否要动态刷新d、显示标注选择节点状态e、理论支持应用中可以使用多个树型控件2、主要采用的技术
a、javascript,xmlhttp，DOMb、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、修改配置文件相关信息
说明：相关代码未经充分测试，仅供交流。