java树控件之dtree，rtree，梅花雪树

java中有些东西是时常会用到但是要是从头开始原生的写的话，就会花掉很多时间，就比如这里的树。在开发中，树控件很常用也很容易发生一些错误。我们假使使用js的树的话，除了关注里面的构成细节之外，还得考虑到它本身的性能如何，是否能满足你的开发需求，最大能渲染渲染出多少的子节点，耗时如何，占用的资源是否合理，能否方便使用ajax等等，都是我们选择树控件时，需要注意的问题，所以这里我列举出我们比较常用的，且性能较为不错的几棵树，供大家不同的需求和选择。

 

这里我列出自己使用过的3棵树，分别是rtree，梅花雪树1.0和dtree。下面就对他们进行一一介绍。老习惯，先上效果图：

  rtree图一

 

  rtree图二

 

  梅花雪树图一

 

  梅花雪树图二

 

  dtree图一

 

  dtree图二

 

 

看到上面的效果图，大家都发现了共同点了，三棵树分别都展示了全部收起和全部展开的这一功能点。我希望大家不要因为看到这几张图片就贸然做出了选择，缘故有两点，第一我们是开发人员该看的是代码和性能而不是效果图，第二我的css太菜，实在弄不好，让三个树风格样式统一，假使公司美工在的话，定然是更加好看的.....

 

 

下面我们逐一介绍，首先是这个rtree，估计经常上论坛的人见过，是曾经的一个精华帖，作者是在dtree的基础上进行的改造，以符合自己的开发需求，号称最大渲染量可以达到25万个节点，我最初也是被这个标题给吸引的，25万呐，结果使用一看，果不其然，25万如我想的一样，跑不起来的.....大概跑到几万就不行了，后来想想，自己还真无聊，实际开发的话，哪里会有这么大的树呀，真是使劲使到刀刃上了.....我们撇开性能不说，看看它是如何做成一棵树的，以此判断它的易用性，毕竟只有好用，方便，才会吸引更多人去使用。下面是它做成一棵树所使用的代码量：

 

<script>
var r=new rTree("r");
r.setNodedbc(true);
r.setNodehref(false);
r.setLazy(false);
r.canAlterbg(true);
r.add(1,0,"a哈罗",'images/folderclose.gif','images/imgfolder.gif','javascript:alert("我们都是哈罗！！！")');
r.add(2,1,"男哈罗","images/folderclose.gif","images/folderopen.gif","","");
r.add(3,1,"b哈罗","images/folderclose.gif","images/folderopen.gif","","");
r.add(4,1,"c哈罗","images/folderclose.gif","images/folderopen.gif","","");
r.add(5,1,"d哈罗","images/folderclose.gif","images/folderopen.gif","","");
r.add(6,2,"e女哈罗",'','',"images/hello1.jpg","show");
r.add(7,2,"f哈罗","images/folderclose.gif","images/folderopen.gif","","");
r.add(8,3,"g哈罗","images/folderclose.gif","images/folderopen.gif","","");
r.add(9,3,"h哈罗","","","","",true);
r.add(10,3,"i哈罗","images/folderclose.gif","images/folderopen.gif","","");
//循环添加，以测试最大渲染量
for(var i=11;i<11;i++){
	r.add(i,parseInt(Math.random()*i),"测试"+i);
}
//r.useBgImg("images/green.jpg");
r.startTree();
</script>

 

 

然后我们看一下梅花雪树的代码：

 

      <SCRIPT LANGUAGE="JavaScript">
          <!--
          var tree = new MzTreeView("tree");
          tree.setIconPath("./");
          tree.nodes['-1_1'] = 'text:节点 1';
          tree.nodes['1_2'] = 'text:节点 2';
          tree.nodes['1_3'] = 'text:节点 3';
          tree.nodes['1_4'] = 'text:节点 4';
          tree.nodes['1_5'] = 'text:节点 5';
          tree.nodes['1_6'] = 'text:节点 6';
          tree.nodes['1_7'] = 'text:节点 7';
          tree.nodes['1_8'] = 'text:节点 8';
          tree.nodes['1_9'] = 'text:节点 9';
          tree.nodes['1_10'] = 'text:节点 10';

          document.getElementById('treeviewarea').innerHTML = tree.toString();
          //下面这句代码就是一展开即聚焦到某一节点上的示例
          setTimeout("tree.focus('1', true); tree.expand(tree.currentNode.id, true);",10);
          
          </SCRIPT>

 

 

最后我们看看dtree的实现代码：

 

<script type="text/javascript">

		var d = new dTree('d');

		d.add(0,-1,'My example tree');
		d.add(1,0,'Node 1','example01.html');
		d.add(2,0,'Node 2','example01.html');
		d.add(3,1,'Node 1.1','example01.html');
		d.add(4,0,'Node 3','example01.html');
		d.add(5,3,'Node 1.1.1','example01.html');
		d.add(6,5,'Node 1.1.1.1','example01.html');
		d.add(7,0,'Node 4','example01.html');
		d.add(8,1,'Node 1.2','example01.html');
		d.add(9,0,'My Pictures','example01.html','Pictures I\'ve taken over the years','','','img/imgfolder.gif');
		d.add(10,9,'The trip to Iceland','example01.html','Pictures of Gullfoss and Geysir');
		d.add(11,9,'Mom\'s birthday','example01.html');
		d.add(12,0,'Recycle Bin','example01.html','','','img/trash.gif');
		//点击节点时，发送一个请求，web中则可以响应一个事件
		d.add(13,0,'MyNode','http://www.baidu.com','send a request to Baidu!!!','','img/question.gif','cd.gif','')

		document.write(d);

	</script>

 

通过上面的易用性对比，我们发现3棵树渲染的主要代码其实大同小异，行数上也差不了多少。那接下来，我们就得去比较它们生成同一棵树，即十个父节点，各自需要的时间。方法则是类似梅花雪树中的计算页面加载耗时的方法，发觉三棵树在加载10000个节点的时候，基本看不出性能上的差别，几次刷新重新渲染情况下，数据如下：

rtree约为：365-549毫秒[全部收起状态]      1422-3972毫秒[全部展开状态]

梅花雪树约为：189-342毫秒[全部收起状态]      3243-5956毫秒[全部展开状态]

dtree约为：189-376毫秒[全部收起状态]      2342-3876毫秒[全部展开状态]

上面测试时，全部在火狐下，而且刷新的之后，有缓存的缘故，时间的间隔可能有些大，到后面几万的时候，三棵树分别在全部展开时，都有卡死的现象，后来就没测试了，这个跟机器性能关系也有很大的关系，所以总体上看，三个性能上也都差不多。

 

这个时候该如何选择呢，我想这个还得大家自己去看源码，去在本机上试试才行。下面我就贴上效果图上的，三棵树的源码，希望能帮助大家做出选择。

评论

4 楼 rowanh 2012-10-26  

..看到rtree...进来的。
当时是因为正好有人发了个很挫的树控件，还自吹为很强大，我才放自己做的树控件到javaeye上的。25万的确是标题党了。。当时测下来发现造成速度慢的最大原因是加标签节点到document上，所以加了lazy的属性，当lazy设为true时，的确是可以加载25万的。
主要还是懒，别人的控件一般都功能很强大，当不符合自己需求时，自己去改太累。。自己写的改起来简单。而且大多数时候，自己要的只是几个最简单的功能而已。

3 楼 tkl211 2012-10-26  

zTree，不解释。。

2 楼 Mr.Cheney 2012-10-26  

上面只用过dtree 或者extjs 的tree控件

1 楼 lku1314 2012-10-26  

呵呵 不错 lz 用心了   我只用过dtree   这方面还得像lz学习