xml + xslt 实现网页多叉树展示

需求：

需要把weka中j48算法以树形结构在网页展示，weka平台中的结果是文本形式的。

 

首先不知道从哪里下手，既然是要展示树，很自然的想到把结果数据转化成xml形式的。于是动手，很快在一天时间转化了出来。

 

接下来问题接踵而至。

最直接的问题是通过什么来展示他，jsp？html?还是什么，我乐观的认为不管用什么展示他，能找到一个例子就好了，可是事与愿违，即使在公司里，在全世界的网站上遨游，也没有找到直接的树形例子，真是鲜为人知，我几近崩溃，唯一的小收获是明白了通过xslt可以把xml的数据转化成任意形式的包括html，而且找到了一个通过这种技术来展示一个左边属性菜单的demo。通过这些收获我痛定思痛，决定自己来写出一个xmlt来把我的xml数据展示成多叉树。

 

Xslt语言怎么用呢？

如何在网页上划线呢？

所幸的是我很快找到了网页划线的demo.并且我认为xslt语言也不是问题，因为语言都不是什么大问题。

如何让线指向文字呢，文字如何定位呢，我想了又想，因为js水平实在有限，于是决定用table来定位。第一列用以划线，第二列用以显示内容，第三列的每一个td 用于存放其左边相应内容的子table。

这样可以通过固定行高来得到划线终止位置

 

随着子孩子数据的增加，table的大小在改变,td的大小也在改变，这导致了划线的位置指到了莫名其妙的位置。如何动态计算变化的table？

 

最后通过计算子节点的个数然后乘以子节点的高度来得到父节点的高度。当然就可以把线指向任何我想指的位置。

 

点了某节点如何展开与合并呢？

设置节点属性 id isleaf sutableDisplay

点击+号

1. 修改该结点 isleaf 属性为0, 修改该节点子节点的 isleaf 属性值为 0

   设置每个结点一个id,读出放到input 的 value 里面。

   js 通过得到input的 id 修改xml里面该id所对应的结点的 isleaf 属性

2. 修改该结点所指向的 table 的 display属性为 block

3. 重新刷新网页

 

点击-号

1.修改该节点isleaf 属性为1，修改所有子节点，及孙节点isleaf属性为0。

2.修改其节点下面所有table的display 属性为none

3.重新刷新网页。

 

至此认为一切ok，没想到客户端没法访问，仔细一看才发现我每点一次节点，都去修改了服务器xml文件，这是绝对不可以的。如何动态修改这些节点呢？

 

最后这样做：从weka直接得到doc，存入session,在servlet里面得到doc,并作修改，再次修改并放到sesseion，同时向客户端输出html。

 

大功告成。