- 浏览: 536031 次
- 性别:
- 来自: 武汉
文章分类
- 全部博客 (533)
- spring (8)
- struts (21)
- hibernate (17)
- java其他 (73)
- 设计模式 (2)
- 开发软件/插件 (26)
- android (8)
- extjs4 (1)
- 网络编程 (4)
- 生活杂记 (3)
- ibatis (5)
- 应用服务器 (4)
- js (26)
- html/css (16)
- linux (0)
- db (32)
- jsp/servlet (13)
- xml (9)
- webservice (10)
- 错误/异常处理 (23)
- 线程 (10)
- maven (7)
- lucene (2)
- python (0)
- 报表 (1)
- mongodb (6)
- restful (6)
- ssl (1)
最新评论
-
zmwxiaoming:
...
struts2拦截器验证登陆状态 -
u012413283:
感谢楼主,同样的问题解决了
eclipse下安装m2e的maven插件报错的各类解决方案(含pom editor没装好的解决方案) -
javalucky:
你妹,想不吐槽都不行啊,eclipse 那来的maven4My ...
clipse加载maven工程提示pom.xml无法解析org.apache.maven.plugins:maven-resources-plugin: -
zhaoyh82:
感谢楼主
eclipse下安装m2e的maven插件报错的各类解决方案(含pom editor没装好的解决方案) -
hua2011:
按照楼主说的,还是没有出现pom editor编辑器,麻烦楼主 ...
eclipse下安装m2e的maven插件报错的各类解决方案(含pom editor没装好的解决方案)
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毫秒[全部展开状态]
上面测试时,全部在火狐下,而且刷新的之后,有缓存的缘故,时间的间隔可能有些大,到后面几万的时候,三棵树分别在全部展开时,都有卡死的现象,后来就没测试了,这个跟机器性能关系也有很大的关系,所以总体上看,三个性能上也都差不多。
这个时候该如何选择呢,我想这个还得大家自己去看源码,去在本机上试试才行。下面我就贴上效果图上的,三棵树的源码,希望能帮助大家做出选择。
评论
当时是因为正好有人发了个很挫的树控件,还自吹为很强大,我才放自己做的树控件到javaeye上的。25万的确是标题党了。。当时测下来发现造成速度慢的最大原因是加标签节点到document上,所以加了lazy的属性,当lazy设为true时,的确是可以加载25万的。
主要还是懒,别人的控件一般都功能很强大,当不符合自己需求时,自己去改太累。。自己写的改起来简单。而且大多数时候,自己要的只是几个最简单的功能而已。
发表评论
-
用 ajaxFileUpload 出现的问题:has no method 'handleError'、返回json数据提示下载 、一直返回error
2014-07-09 10:04 10951. 提示错误:Uncaught TypeError: Ob ... -
js防止表单重复提交
2013-10-30 11:01 542<script language="javas ... -
js控制文本框自动适应文本长度
2013-10-15 10:03 1011<!Doctype HTML PUBLIC " ... -
high一下源码(仅适用chrome)
2013-10-15 10:00 523<!DOCTYPE HTML PUBLIC " ... -
js弹出层
2013-10-15 09:50 744<!DOCTYPE html> <htm ... -
jQuery选择器总结
2013-09-16 13:23 470jQuery 的选择器可谓之 ... -
Java购物车实现
2013-09-13 16:42 1115查询的资料,找到三种 ... -
jquery 追加tr和删除tr
2013-09-11 17:28 1016<script type="text/jav ... -
jquery的each()详细介绍
2013-07-29 14:12 752each()方法能使DOM循环结构简洁,不容易出错。e ... -
7kb的javascript日期操作类库(XDate)
2013-07-22 14:33 1003A Modern JavaScript Date Libra ... -
js遍历对象的属性并且动态添加属性
2013-07-22 13:27 2245Java代码 var ... -
jQuery插件FullCalendar日程表实现可扩展Google日历功能
2013-07-01 11:56 3453[javascript] view plainc ... -
js搜索关键词高亮
2013-06-20 18:23 1217<!DOCTYPE HTML PUBLIC " ... -
CKEditor+CKFinder+jsp的整理
2013-05-24 10:53 1565CKEditor是新一代的FCKeditor,是一个重新开发 ... -
jsoup解析html/根据关键词拿到论坛帖子信息
2013-04-19 17:02 1582以论坛《宽带山》为例,需要根据给定的 ... -
JS限制Textarea文本域字符个数
2013-03-14 16:44 1293<html> <head> ... -
ajax的xmlHttpRequest对象
2013-03-12 14:56 1128XMLHttpReque ... -
jquery选择器操作控制select
2013-03-08 10:27 903jQuery获取Select选择的Text和Value: ... -
4行CSS实现表格内容超过一行的部分,用省略号代替
2013-02-25 14:00 1899table{ table-layout: ... -
js获取当前系统时间 .
2013-02-20 13:31 6393var date=new Date(); var ...
相关推荐
三个常用树控件dtree最新dtree带checkbox还有mztreeview1.0跟2.0里面还有本人写的部分demo如果是常用开发请使用mztree1.0或dtree 如果有特殊需求请使用带checkbox的dtree或mztree2.0
DTREE 有复选框和无复选框的树形控件
dtree是一个由JavaScript编写成的简单的树形菜单组件,目前免费并且开源。
dtree树dtree树dtree树dtree树
dtree在生成简单树方面比使用Jquery的treeView要方便,代码实现的是用户选择的树状结构图。
因为在公司都是愣头青,项目中设计到dtree,所以我总结了一下,做成ppt供大家参考,里面有自己写的实例。
dtree树控件的资料和使用方法,一看就会!
在别人基础上改了一下 单选多选简单树形框架dtree 只要套参数就行了 非常方便
树形菜单dtree JS实现
dtree 保存在csdn以便以后使用 dtree 树结构 前端
用dtree插件实现树形控件
dtree是可用有产生树形目录的javascript插件,集实用美观与一体。
java开发中的dtree技术,可以很好的实现复选
收集的比较全的树控件 ,dtree,ajaxtree treeview等
dtree实现的树支持多选,dtree实现的树,jsp树,js树
DTree(最好用的JS写成的树形菜单控件.内含API)