谁来总结一下比较成熟的Web树状结构的解决方案

最简单的方案XLoadTree,也就是Xtree+XMLHTTP,动态生成节点

xtree是一个比较不错的树，可以自己把它改成支持xml格式的。我比较喜欢它的双击风格，有点象资源管理器 很多网上流行的树都是它的变种。
不大喜欢csdn和微软的那种，原因很简单，他们使用的是xsl，只能在IE上跑，不兼容。

jjw,你的网站的代码好像已经不能下载了，能再提供一个连接吗。
另外能否大致说一下动态装载tree的一个基本实现过程。

今天讨论的是树，明天可能要讨论曲线图，后天可能讨论流程图，大后天又要讨论......,八仙过海，怪招层出不穷。够了！恶心死了！除非那位老兄能拍着胸脯说"我的方案已实现了大多数现在已知的界面需求、将来也能轻易实现新的界面需求"，我才敢学他的方案。成熟的界面解决方案应该给出很多已有的实现给我们挑选，而不需要我们自已满世界去找，去开发。界面技术纯属软件的次要复杂性，将宝贵的时间花在与业务没有联系的界面实现上纯属浪费时间。

有没有这样一套成熟的完备的易于扩展的js界面库呢？qooxdoo?

第一次在 javaeye 上发表文章, 欢迎指正

在 基于 web 界面的设计中，树的设计永远是比较头痛的一个方面，虽然技术在日新月异的变化，树仍然是不少开发人员难以很好处理的一个技术难点。在我的开发过程中，因为树的设计，试用过多个树，现在与大家讨论一下。

当前，使用 jsp/servlet 开发过程中，树的设计大概有以下几种
1. 使用 applet 来解决
2. 使用 flex / flash 绑定数据库来处理
3. 使用 js 生成 div/tab 或 table，其中，有人做成 tag
4. 使用 java 与 js 结合的方式，如 tomcat admin 界面

下面分别介绍一下：
1. 使用 applet 来解决
applet 方式在最终用户方面可能接受的程度不好，虽然国外有些公司用 applet 来做比如课件或小游戏，但树的话我们很难让用户接受让他们的浏览器上跑这样的小程序。而且，如果树很多，节点很多，深度太深，势必在界面上很难处理，很不友好。

2. 使用 flex / flash 绑定数据库来处理
flash 处理起来是比较好看，用户接受程度也比较高，只是仍然难以处理节点比较多和比较深的树。
做些简单的树，　比如两层，节点少的还可以。

3. 使用 js 生成 div或 table，其中，有人做成 tag
现在这方面的树比较多，比较有代表性的有:
WebFxTree, DTree, JSPTree　等，我有幸试用了多个这样的树，只是效果不是很令人满意。
考虑分析的几个方面：
3.1 数据源
现在大概有两种树的数据源： xml 文件和 dataSource

3.2 树的产生与节点的动态维护
与 xml 数据文件绑定还是比较容易处理的一种，而用 dataSource　绑定则要动态产生树，如果每一次都要去读取 database, 在性能上比较难以处理，虽然也可以写 cache. 如果使用 ajax 或者其它 XMLHttpRequest ，节点的增加或者删除可以通过不刷新页面来维护，也可能是一种解决的方式。但有的比较不太好用,比如 DTree ，在产生之后，除了刷新，目前还不能动态增加一个节点。

3.3 扩展性能
我使用过 花园的树，我不知道怎么样给它取名，它好象是 mstree 过来的，树是 xml 文件，由一个 js 文件来解析，树的扩展性能还比较好，可以很轻松的找出某几个节点下的所有节点。
WebFxTree(XLoadTree)则没有很好的数据结构，扩展性相对比较差，
DTree 的数据结构还可能，但它使用两维数组去处理树的方式，不是很好，在性能上很难满足多个节点的问题。

3.4 速度问题
我分别用了同样的方法测试了一下 WebFxTree 和 DTree 速度，都是产生1000/2000个结点(一层)，在速度方面, DTree 的速度是比较慢的一点，在 PIV 2.5 G /512M 的机器上，1000个结点，WebFxTree 跑了1-2秒，而DTree 跑了 5-6 秒，
2000个节点的话，WebFxTree 跑了4-8 秒，而 DTree 跑了 26秒以上
测试多层的情况就更慢了。

3.5 产生的机制
WebFxTree 和 DTree 都是使用 div 层来处理树的，产生出来的代码都很相似，DTree 比 WebFxTree　要少4倍左右的代码，不知道为什么 DTree 却多了几倍的时间？
WebFxTree:

<div id="webfx-tree-object-4" ondblclick="webFXTreeHandler.toggle(this);;" class="webfx-tree-item" onkeydown="return webFXTreeHandler.keydown(this, event);"><img id="webfx-tree-object-4-icon" class="webfx-tree-icon" src="images/xp/openfolder.png" onclick="webFXTreeHandler.select(this);;"><a href="javascript:void(0);;" id="webfx-tree-object-4-anchor" onfocus="webFXTreeHandler.focus(this);;" onblur="webFXTreeHandler.blur(this);;">Root</a></div><div id="webfx-tree-object-4-cont" class="webfx-tree-container" style="display: block;"><div id="webfx-tree-object-5" ondblclick="webFXTreeHandler.toggle(this);;" class="webfx-tree-item" onkeydown="return webFXTreeHandler.keydown(this, event);"><img id="webfx-tree-object-5-plus" src="images/xp/L.png" onclick="webFXTreeHandler.toggle(this);;"><img id="webfx-tree-object-5-icon" class="webfx-tree-icon" src="images/xp/file.png" onclick="webFXTreeHandler.select(this);;"><a href="javascript:void(0);;" id="webfx-tree-object-5-anchor" onfocus="webFXTreeHandler.focus(this);;" onblur="webFXTreeHandler.blur(this);;">node1</a></div><div id="webfx-tree-object-5-cont" class="webfx-tree-container" style="display: none;"></div><div id="webfx-tree-object-6" ondblclick="webFXTreeHandler.toggle(this);;" class="webfx-tree-item" onkeydown="return webFXTreeHandler.keydown(this, event);"><img id="webfx-tree-object-6-plus" src="images/xp/L.png" onclick="webFXTreeHandler.toggle(this);;"><img id="webfx-tree-object-6-icon" class="webfx-tree-icon" src="images/xp/file.png" onclick="webFXTreeHandler.select(this);;"><a href="javascript:void(0);;" id="webfx-tree-object-6-anchor" onfocus="webFXTreeHandler.focus(this);;" onblur="webFXTreeHandler.blur(this);;">node2</a></div><div id="webfx-tree-object-6-cont" class="webfx-tree-container" style="display: none;"></div><div id="webfx-tree-object-7" ondblclick="webFXTreeHandler.toggle(this);;" class="webfx-tree-item" onkeydown="return webFXTreeHandler.keydown(this, event);"><img id="webfx-tree-object-7-plus" src="images/xp/L.png" onclick="webFXTreeHandler.toggle(this);;"><img id="webfx-tree-object-7-icon" class="webfx-tree-icon" src="images/xp/file.png" onclick="webFXTreeHandler.select(this);;"><a href="javascript:void(0);;" id="webfx-tree-object-7-anchor" onfocus="webFXTreeHandler.focus(this);;" onblur="webFXTreeHandler.blur(this);;">node3</a></div><div id="webfx-tree-object-7-cont" class="webfx-tree-container" style="display: none;"></div><div id="webfx-tree-object-8" ondblclick="webFXTreeHandler.toggle(this);;" class="webfx-tree-item" onkeydown="return webFXTreeHandler.keydown(this, event);"><img id="webfx-tree-object-8-plus" src="images/xp/L.png" onclick="webFXTreeHandler.toggle(this);;"><img id="webfx-tree-object-8-icon" class="webfx-tree-icon" src="images/xp/file.png" onclick="webFXTreeHandler.select(this);;"><a href="javascript:void(0);;" id="webfx-tree-object-8-anchor" onfocus="webFXTreeHandler.focus(this);;" onblur="webFXTreeHandler.blur(this);;">node4</a></div><div id="webfx-tree-object-8-cont" class="webfx-tree-container" style="display: none;"></div><div id="webfx-tree-object-9" ondblclick="webFXTreeHandler.toggle(this);;" class="webfx-tree-item" onkeydown="return webFXTreeHandler.keydown(this, event);"><img id="webfx-tree-object-9-plus" src="images/xp/L.png" onclick="webFXTreeHandler.toggle(this);;"><img id="webfx-tree-object-9-icon" class="webfx-tree-icon" src="images/xp/file.png" onclick="webFXTreeHandler.select(this);;"><a href="javascript:void(0);;" id="webfx-tree-object-9-anchor" onfocus="webFXTreeHandler.focus(this);;" onblur="webFXTreeHandler.blur(this);;">node5</a></div><div id="webfx-tree-object-9-cont" class="webfx-tree-container" style="display: none;"></div><div id="webfx-tree-object-10" ondblclick="webFXTreeHandler.toggle(this);;" class="webfx-tree-item" onkeydown="return webFXTreeHandler.keydown(this, event);"><img id="webfx-tree-object-10-plus" src="images/xp/L.png" onclick="webFXTreeHandler.toggle(this);;"><img id="webfx-tree-object-10-icon" class="webfx-tree-icon" src="images/xp/file.png" onclick="webFXTreeHandler.select(this);;"><a href="javascript:void(0);;" id="webfx-tree-object-10-anchor" onfocus="webFXTreeHandler.focus(this);;" onblur="webFXTreeHandler.blur(this);;">node6</a></div>
<div id="webfx-tree-object-10-cont" class="webfx-tree-container" style="display: none;"></div>
<div id="webfx-tree-object-11" ondblclick="webFXTreeHandler.toggle(this);;" class="webfx-tree-item" onkeydown="return webFXTreeHandler.keydown(this, event);"><img id="webfx-tree-object-11-plus" src="images/xp/L.png" onclick="webFXTreeHandler.toggle(this);;"><img id="webfx-tree-object-11-icon" class="webfx-tree-icon" src="images/xp/file.png" onclick="webFXTreeHandler.select(this);;"><a href="javascript:void(0);;" id="webfx-tree-object-11-anchor" onfocus="webFXTreeHandler.focus(this);;" onblur="webFXTreeHandler.blur(this);;">node7</a></div>
<div id="webfx-tree-object-11-cont" class="webfx-tree-container" style="display: none;"></div>
<div id="webfx-tree-object-12" ondblclick="webFXTreeHandler.toggle(this);;" class="webfx-tree-item" onkeydown="return webFXTreeHandler.keydown(this, event);"><img id="webfx-tree-object-12-plus" src="images/xp/L.png" onclick="webFXTreeHandler.toggle(this);;"><img id="webfx-tree-object-12-icon" class="webfx-tree-icon" src="images/xp/file.png" onclick="webFXTreeHandler.select(this);;"><a href="javascript:void(0);;" id="webfx-tree-object-12-anchor" onfocus="webFXTreeHandler.focus(this);;" onblur="webFXTreeHandler.blur(this);;">node8</a></div>

DTree

<div class="dtree">
<div class="dTreeNode"><img id="id0" src="img/base.gif" alt="" />Root</a></div>
<div id="dd0" class="clip" style="display:block;"><div class="dTreeNode"><img src="img/join.gif" alt="" /><img id="id1" src="img/page.gif" alt="" />node1</div>
<div class="dTreeNode"><img src="img/join.gif" alt="" /><img id="id2" src="img/page.gif" alt="" />node2</div>
<div class="dTreeNode"><img src="img/join.gif" alt="" /><img id="id3" src="img/page.gif" alt="" />node3</div>
<div class="dTreeNode"><img src="img/join.gif" alt="" /><img id="id4" src="img/page.gif" alt="" />node4</div>
<div class="dTreeNode"><img src="img/join.gif" alt="" /><img id="id5" src="img/page.gif" alt="" />node5</div>
<div class="dTreeNode"><img src="img/join.gif" alt="" /><img id="id6" src="img/page.gif" alt="" />node6</div>

还有对 checkbox 的支持程度, 刷新后的状态保持等

4. 使用 java 与 js 结合的方式，如 tomcat admin 界面
这个大家有空可以看一下 tomcat 的源码

本文所使用的部分代码:

WebFxTree

var tree = new WebFXTree("Root");;
for ( i = 1; i< 1000; i++ );
{
	eval("var product"+i+"= new WebFXTreeItem('node"+i+"');");;
	eval("tree.add(product"+i+");");;
}

var now2 = new Date();;
var time2 = now2.getTime();;		


document.write(tree);;

var now3 = new Date();;
var time3 = now3.getTime();;

WriteToFile(tree);;

DTree

d = new dTree('d');;
var i ;
d.add(0,-1,"Root");;
for ( i = 1; i< 1000; i++ );
{
	d.add(i,0,"node"+i);;
}
		
var now2 = new Date();;
var time2 = now2.getTime();;		

document.write(d);;
		
var now3 = new Date();;
var time3 = now3.getTime();;
	
WriteToFile(d);;

欢迎指正!

以下这帖里有我用dojo实现的树：

利用Dojo和JSON建立无限级AJAX动态加载的功能模块树

效果图：


下载：
DEMO及源代码dojotree.rar下载

感觉都是太笨重，鉴定完毕！

Prize Tags 树很好的，可以实现很多常用功能，速度很好。不知有没有可以“拖放”的树？

dojo的可以拖放，而且功能比较强大