论坛首页 Web前端技术论坛

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

浏览 118160 次
该帖已经被评为精华帖
作者 正文
   发表时间:2004-01-12  
现在Web树状结构,主要有两类解决办法,一类是在服务器端生成,每次点击树节点,都会提交一次,代表是struts的树状结构,另一类是在客户端靠复杂的Javascript来生成,这样的解决方案就更加五花八门了,谁做Web树经验比较丰富,总结一下流行的解决方案,给大家推荐几个好用的web树?
   发表时间:2004-01-12  
我个人推荐使用解析XML的方式来实现。
树的内容存储在XML里。可以在客户端使用JScript来解析,也可以自己用Java解析。
0 请登录后投票
   发表时间:2004-01-12  
我这里用过几个不同的方案,但还没有一个比较满意的,关键还是缺少一个包含前后台的全面的方案,往往大家都把注意力放在显示上面,其实还有一些问题容易被忽视:
·最重要的,树节点必须可以关联更多的信息(其实应该是节点对应的Object),在大多数和树有关的页面交互中,只有节点上显示的文字是远远不够的
·超连接
·CheckBox
·自由的增加删除
·能够方便地取当前节点、取节点的父节点、所有子节点

WebFX的XTree和XLoadTree还是不错的。只用过XTree,缺点是在Servlet里面用它构造树显得有点繁琐,而且在节点上绑定信息不太方便,XLoadTree没用过,用过的朋友可以比较一下。
0 请登录后投票
   发表时间:2004-01-13  
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.
0 请登录后投票
   发表时间:2004-01-13  
muziq 写道
我这里用过几个不同的方案,但还没有一个比较满意的,关键还是缺少一个包含前后台的全面的方案,往往大家都把注意力放在显示上面,其实还有一些问题容易被忽视:
·最重要的,树节点必须可以关联更多的信息(其实应该是节点对应的Object),在大多数和树有关的页面交互中,只有节点上显示的文字是远远不够的
·超连接
·CheckBox
·自由的增加删除
·能够方便地取当前节点、取节点的父节点、所有子节点

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


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

我们用TagLib在JSP中直接产生树,也不算麻烦,下面是构建单位树的例子:
<!-- 取当前单位所有子单位数据, 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;
			}
		}		
	}
0 请登录后投票
   发表时间:2004-01-13  
我想延伸一下这个话题,如何完全分离得到数据显示数据的代码:服务端只是构建数据不管显示把数据构建完毕之后传给客户端,让客户端来负责显示。如果客户端有操作需要从服务端读取数据,那只是局部刷新页面。

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

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

想听听各位的见解。。。。。。
0 请登录后投票
   发表时间:2004-01-13  
guty:
我好像记得你做的系统是通过xmlhttp+rpc实现的。
能展现一下,这两部分的源码吗?:
1。从数据库读取数据动态构建xml文件。
2。js得到xml并解析xml展现数据。
如果不涉及商业机密的话。
0 请登录后投票
   发表时间:2004-01-14  
jaqwolf 写道
我想延伸一下这个话题,如何完全分离得到数据显示数据的代码:服务端只是构建数据不管显示把数据构建完毕之后传给客户端,让客户端来负责显示。如果客户端有操作需要从服务端读取数据,那只是局部刷新页面。

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

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

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

up
2 请登录后投票
   发表时间:2004-01-14  
在分离显示逻辑和业务逻辑方面,不知道大家听说过xmlc没有?我想它应该是非常好的实现。严格意义上讲,它不是一个framework,而只是一个工具。
目前使用它的web presentation framwork是Barracuda。不过xmlc也可以单独使用。
http://www.barracudamvc.org/Barracuda/index.html

它们都是从大名鼎鼎的Enhydra中分离出来的子项目。
有兴趣的可以了解了解。
1 请登录后投票
   发表时间:2004-01-14  
jaqwolf 写道
guty:
我好像记得你做的系统是通过xmlhttp+rpc实现的。
能展现一下,这两部分的源码吗?:
1。从数据库读取数据动态构建xml文件。
2。js得到xml并解析xml展现数据。
如果不涉及商业机密的话。


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

树是用taglib生成的。
0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics