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

现在Web树状结构，主要有两类解决办法，一类是在服务器端生成，每次点击树节点，都会提交一次，代表是struts的树状结构，另一类是在客户端靠复杂的Javascript来生成，这样的解决方案就更加五花八门了，谁做Web树经验比较丰富，总结一下流行的解决方案，给大家推荐几个好用的web树？

我个人推荐使用解析XML的方式来实现。
树的内容存储在XML里。可以在客户端使用JScript来解析，也可以自己用Java解析。

我这里用过几个不同的方案，但还没有一个比较满意的，关键还是缺少一个包含前后台的全面的方案，往往大家都把注意力放在显示上面，其实还有一些问题容易被忽视：
·最重要的，树节点必须可以关联更多的信息（其实应该是节点对应的Object），在大多数和树有关的页面交互中，只有节点上显示的文字是远远不够的
·超连接
·CheckBox
·自由的增加删除
·能够方便地取当前节点、取节点的父节点、所有子节点

WebFX的XTree和XLoadTree还是不错的。只用过XTree，缺点是在Servlet里面用它构造树显得有点繁琐，而且在节点上绑定信息不太方便，XLoadTree没用过，用过的朋友可以比较一下。

Tigra JavaScript tree

http://www.softcomplex.com/products/tigra_tree_menu/

Free and open source I think.
But seems you have to use HTML Frames.

国外的一些JavaScript大多是面向对象的，修改起来比较方便。例如XTree，你可以为WebFXTreeItem增加属性，代表对象的Id和类型。

我们用TagLib在JSP中直接产生树，也不算麻烦，下面是构建单位树的例子：
[code:1]
<!-- 取当前单位所有子单位数据, o.organization是父单位属性-->
<script language="javascript">
if (document.getElementById) {
<ww:set name="orgs" value="#entityService.find(\"select o.id,o.name,o.organization.id,o.uniqueId from Organization as o where o.uniqueId like '\"+#currentOrg.uniqueId+\"%'\")"/>
<ww:iterator value="#orgs">
<!-- 先扫描一遍单位集合，构造树节点 -->
<ww:if test="[0]!=#currentOrg.id">
<!-- 子单位，构造普通节点 -->
var a<ww:property value="[0]"/> = new WebFXTreeItem('<ww:property value="[1]+'('+[3]+')'"/>','javascript:showProperty();','Organization','<ww:property value="[0]"/>','','../images/tree/org.gif','../images/tree/org.gif');
</ww:if>
<ww:else>
<!-- 当前单位，构造根节点 -->
var a<ww:property value="[0]"/> = new WebFXTree('<ww:property value="[1]+'('+[3]+')'"/>','javascript:showProperty();','Organization','<ww:property value="[0]"/>','','../images/tree/org.gif','../images/tree/org.gif');
a<ww:property value="[0]"/>.setBehavior('classic');
var tree = a<ww:property value="[0]"/>;
</ww:else>
</ww:iterator>

<ww:iterator value="#orgs">
<!--再先扫描一遍单位集合，根据父子关系，把刚才构建的树节点串起来 -->
<ww:if test="[0]!=#currentOrg.id">
a<ww:property value="[2]"/>.add(a<ww:property value="[0]"/>);
</ww:if>
</ww:iterator>

<!-- 产生树 -->
document.write(tree);

} //end if (document.getElementById)

//新建一个节点
function onNew()
{
//缺省值，为根节点的组织
var parent = tree;
var selected = tree.getSelected();
if (selected)
{
parent = selected;
}
if (selected.value == "")
{
showInformation("父节点没有保存");
return;
}

var node = new WebFXTreeItem('(新单位)','javascript:showProperty()','Organization','','','../images/tree/org.gif','../images/tree/org.gif');
parent.add(node);
parent.expand();
node.focus();
showProperty();
}

//删除一个节点
function onDelete()
{
var selected = tree.getSelected();
if (selected)
{
if (selected.value != "")
{
if (showQuestion("是否确定要删除单位["+selected.text+"]?"))
{
var returnValue = openDialogFrame('organization.action?command=delete&checkedItems='+selected.value,'删除组织',300);
if(returnValue == true){
selected.remove();
//refresh
showProperty();
}
}
}
else
{
selected.remove();

//refresh
showProperty();
}

}
else
showInformation("请选择需要删除的单位");

}

//显示修改一个节点
function showProperty() {
if (propertyframe!=null)
{
var selected = tree.getSelected();
if (selected)
{
if (selected.value != "")
propertyframe.location='organization.action?openForm=true&organization.id='+selected.value;
else
propertyframe.location='organization.action?openForm=true&organization.organization.id='+selected.parentNode.value;
}
}
}
[/code:1]

我想延伸一下这个话题，如何完全分离得到数据和显示数据的代码：服务端只是构建数据不管显示把数据构建完毕之后传给客户端，让客户端来负责显示。如果客户端有操作需要从服务端读取数据，那只是局部刷新页面。

我以前的做法很土，jsp中夹杂着html和js，因为我需要得到一些数据，然后显示，然后再得到一些数据然后再显示。。如此循环，以至于我得到数据的代码和显示数据的代码总是混在一起。非常难受。估计现在这样做的人还是不少。

解决这个问题我目前只是知道这样做：在服务端动态的构建xml文件，把要展现的数据都封装在这个文件中，然后传给客户端，客户端通过解析xml来展现。目前从网上搜索出来的结果来看，通过js来解析xml展现的方案很多，但是我总觉得js使用不是很方便，主要是开发者写js太辛苦，也许是我js不熟悉把。而且引入另外一个问题，使用js＋httpmxl和服务端通信的话，好像仅仅支持ie浏览器，这又是让人不痛快的事情。

想听听各位的见解。。。。。。

guty:
我好像记得你做的系统是通过xmlhttp＋rpc实现的。
能展现一下，这两部分的源码吗？：
1。从数据库读取数据动态构建xml文件。
2。js得到xml并解析xml展现数据。
如果不涉及商业机密的话。

up

在分离显示逻辑和业务逻辑方面，不知道大家听说过xmlc没有？我想它应该是非常好的实现。严格意义上讲，它不是一个framework，而只是一个工具。
目前使用它的web presentation framwork是Barracuda。不过xmlc也可以单独使用。
http://www.barracudamvc.org/Barracuda/index.html

它们都是从大名鼎鼎的Enhydra中分离出来的子项目。
有兴趣的可以了解了解。

我们用的技术非常杂，xmlhttp+rpc是用来做远程调用的。

树是用taglib生成的。