java树控件之dtree,rtree,梅花雪树
来源:互联网 发布:扒简谱的软件 编辑:程序博客网 时间:2024/04/30 02:53
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毫秒[全部展开状态]
上面测试时,全部在火狐下,而且刷新的之后,有缓存的缘故,时间的间隔可能有些大,到后面几万的时候,三棵树分别在全部展开时,都有卡死的现象,后来就没测试了,这个跟机器性能关系也有很大的关系,所以总体上看,三个性能上也都差不多。
这个时候该如何选择呢,我想这个还得大家自己去看源码,去在本机上试试才行。下面我就贴上效果图上的,三棵树的源码,希望能帮助大家做出选择。
点击打开下载链接
- java树控件之dtree,rtree,梅花雪树
- 梅花雪的树控件
- 梅花树控件
- 关于梅花雪树控件的使用
- 梅花雪树控件的使用
- 梅花雪树控件2.0的例子
- 梅花雪树控件的使用
- js dtree 树控件用法
- 前端控件之树型结构dTree.js使用
- 梅花雪树问题
- 梅花雪树
- 梅花雪树
- JSP梅花雪树
- 梅花雪树控件的使用及下载
- 梅花雪树控件的一些使用问题
- 梅花雪树控件的属性及方法
- R树 Rtree
- 梅花雪 树形控件
- 【QTP】On Error 的使用方法
- _stddef.h和mem.h在编译时出错
- 不靠加速器 路由配置也可扭转网游战局
- Windows7+WDK+VS2010+VisualDDK驱动开发环境搭建
- Linux 中 x86 的内联汇编
- java树控件之dtree,rtree,梅花雪树
- What is Fuzz Testing?
- JFreeChar生成柱状图
- 软键盘的自动打开和隐藏
- 一切看淡,心就不累了-伤感QQ日志
- 在Eclipse Indigo安装UML2 Tools(反向工程)
- oracle学习拾遗
- nginx 支持 ThinkPHP
- Building 32-bit Wine on a 64-bit (x86-64) CentOS