简单的js树-rTree，可负载25万个节点（非ajax），代码少，易用易懂。更新checkbox补丁代码（在7楼）

这是我写的第一个js的控件，修修改改快大半年了，公司的老项目里在用。
废话不多说，直接说特点吧！
r.setNodedbc(true);根（有子节点）是否可以双击打开关闭。
r.setNodehref(false);根（有子节点）是否可以触发事件。
r.setLazy(false);是否延迟生成树。
r.canAlterbg(true);点击节点后改变背景色。这是用jquery做得补丁式的功能。
8个参数 id，父id，显示字符，关闭时图片路径，打开时图片路径，href的路劲/调的js方法，目标，是否关闭（lazy=true时无效）。
我觉得最大的特色就是lazy，我写的时候发现，树慢就慢在构造上，加载数据到不慢，所以lazy就是数据一次性加进去，但一次只生成一层。如果要打开好几层的话，可以自己调openNode()方法。
像大家说的checkbox等功能，我做过例子，是通过jquery后期再添加进去的，觉得jquery打补丁真的不错。
号称的250000条数据，是在全部都是随机节点的情况下，不死机的状况。就是一层的节点不能过大。。不然也会死。
代码很少200行，注释70行，大家如果用得上的话，我就最开心不过了！！！
下面是构造的代码，同dtree，有啥意见多提提，我好再改进，谢谢啦！！！

!!!!!!如果用js方法的话 参数要用&quot包起来。如 javascript:afun("xxx");!!!!!!!!!!!!

全部打开按钮，只适用于不使用lazy的情况

var r=new rTree("r");
r.setNodedbc(true);//双击开关节点
r.setNodehref(false);//根是否能绑事件 
r.setLazy(false);//延时构造树 要加入1000条以上节点时，请设为true
r.canAlterbg(true);//点击节点后，改变节点背景色
r.add(1,0,"a哈罗",'images/folderclose.gif','images/imgfolder.gif','javascript:alert("我们都是哈罗！！！")');
r.add(2,1,"男哈罗",'images/hello1.gif','',"./baidu.mht");
r.add(3,1,"b哈罗",'','images/hello1.gif');
r.add(4,1,"c哈罗");
r.add(5,1,"d哈罗");
r.add(6,2,"e女哈罗",'','',"images/hello1.jpg","show");
r.add(7,2,"f哈罗");
r.add(8,3,"g哈罗");
r.add(9,3,"h哈罗","","","","",true);
r.add(10,3,"i哈罗");
for(var i=11;i<11;i++){//设置随机的节点，10000的话还是很快的。。刷的一下就出来
	r.add(i,parseInt(Math.random()*i),"测试"+i);
}
//r.useBgImg("images/green.jpg");
r.startTree();

评论

68 楼 tracy821 2009-09-17  

很不错的东西，看看能不能移置到我们的项目里

67 楼 rox 2009-09-17  

原创很不错，能够有和其他多种树的使用和性能对比，更好了:)

66 楼 fm_974 2009-09-17  

malasun 写道

借楼主个人气:看看这个树
http://sites.google.com/site/webjslib/
和这个框架
http://sourceforge.net/projects/sopo/files/

貌似这的例子Chrome下一个也不能用．．．

楼主的精神是可嘉的，虽然现在现在的树的例子已经不少了

65 楼 whaosoft 2009-09-16  

很不错啊！

64 楼 lianda220 2009-09-14  

很好很强大!

63 楼 sjpsega 2009-09-13  

不错不错，支持一下~~~~

62 楼 qhhhn 2009-09-11  

记号，估计用得上..

61 楼 lr1213 2009-09-11  

fyf_008 写道

lr1213 写道

当测试10000条时，浏览器基本卡的动不了！

一般用1-2百个节点就够了，没必要太多考虑性能问题，10000个节点，扯皮的。。。
你做项目，一次生成这么多？？???????
这玩儿缺点是难看，还有些基本功能没集成，我不会用jquary怎么办？？？？？？？？？？？
总之，100个垃圾特点，不如一个有用的特点，整什么垃圾25万个节点呢。
又不是存储结构。而且生成树的方式太恶心，没对象感

25W确实也是扯淡的，你能完美做到我只能说你牛逼！呵呵，lz的树还是值的学习的。

60 楼 fyf_008 2009-09-11  

lr1213 写道

当测试10000条时，浏览器基本卡的动不了！

一般用1-2百个节点就够了，没必要太多考虑性能问题，10000个节点，扯皮的。。。
你做项目，一次生成这么多？？???????
这玩儿缺点是难看，还有些基本功能没集成，我不会用jquary怎么办？？？？？？？？？？？
总之，100个垃圾特点，不如一个有用的特点，整什么垃圾25万个节点呢。
又不是存储结构。而且生成树的方式太恶心，没对象感

59 楼 lr1213 2009-09-11  

当测试10000条时，浏览器基本卡的动不了！

58 楼 xiaoxie2007 2009-09-10  

有右键菜单吗？如果没有最好加上就更完美了

57 楼 malasun 2009-09-10  

借楼主个人气:看看这个树
http://sites.google.com/site/webjslib/
和这个框架
http://sourceforge.net/projects/sopo/files/

56 楼 rowanh 2009-09-09  

wa327114652 写道

楼主你好，我是初学者，我下载下来后不会使用！希望你会发表一下使用说明，谢谢！

在head里导入用到的js和css。
页面里加一个<div id="main"></div>
在后面加上
<script>
var r=new RTree('r');
r.add('','').....
</script>
静态的树，就直接添加节点。
动态的改成
<c:foreach items='' var='vo'>
r.add('${vo.id}','${vo.pid}'......);
</c:foreach>

55 楼 rowanh 2009-09-09  

delino 写道

看了下你的帖子。没看代码。

我个人觉得 ajax 树的效率肯定会高于 静态树，你一次性加载 
父节点，子节点，传输的数据量会很大。

如果用ajax 树，就会好的多，而且资源节省也多的多了，
第一次只加载 父节点。
当用户点击父节点的时候，再去加载该父节点的子节点，但是只加载一次，第二次点击就是静态节点了（上一次点击的获得的数据保存到该父节点下），
个人感觉这样会节省大量资源。

试想，有几个人会去一个个节点都点开啊？
第一：没这需要
第二：还是没需要

其实25W条数据 是没有意义的，最多算是一个压力测试，当数据量多的时候，应该考虑  快速查询功能  而不是树了。
比如当在input 里输入  需要的节点（模糊搜索）时，js 自动定位打到 该 节点，这才是有意义的。 

做系统，有一个最大的 基础 就是   用户体验。方便才是第一的


其实25W条数据有实际的意义吗？

恩，确实如你说的一样。ajax的传输流量小（没打开的节点不占流量），但是传输频率多，后台调用次数多。
当时只想着，减少服务器访问次数，和去掉ajax树中叶子前面有加号的问题。
还有个原因就是，觉得ajax树用起来会烦点。。。
25万，的确是没什么意义。我自己用最多也就1000多个节点。

54 楼 delino 2009-09-09  

对了，关于有人说的 全部展开。

我觉得可以这样解决。。

1. 一个一个的展开。 当第一个展开好后， callback 一下，展开后一个。

2. 在 数组 里 put 好数据后，分批 放入 各个父节点下

53 楼 delino 2009-09-09  

看了下你的帖子。没看代码。

我个人觉得 ajax 树的效率肯定会高于 静态树，你一次性加载 
父节点，子节点，传输的数据量会很大。

如果用ajax 树，就会好的多，而且资源节省也多的多了，
第一次只加载 父节点。
当用户点击父节点的时候，再去加载该父节点的子节点，但是只加载一次，第二次点击就是静态节点了（上一次点击的获得的数据保存到该父节点下），
个人感觉这样会节省大量资源。

试想，有几个人会去一个个节点都点开啊？
第一：没这需要
第二：还是没需要

其实25W条数据 是没有意义的，最多算是一个压力测试，当数据量多的时候，应该考虑  快速查询功能  而不是树了。
比如当在input 里输入  需要的节点（模糊搜索）时，js 自动定位打到 该 节点，这才是有意义的。 

做系统，有一个最大的 基础 就是   用户体验。方便才是第一的


其实25W条数据有实际的意义吗？

52 楼 wa327114652 2009-09-09  

楼主你好，我是初学者，我下载下来后不会使用！希望你会发表一下使用说明，谢谢！

51 楼 phoenixup 2009-09-09  

先Mark一下，对JavaScript不擅长。。。不过有的时候还必须要用~~

50 楼 rowanh 2009-09-08  

banrui 写道

不错，感觉跟dTree有点象

最早的时候是读取json数据的。。。别人都感觉烦。。为了易用，学习了dtree的数据添加方式。

49 楼 eagledame 2009-09-08  

很好的资料,呵呵谢谢楼主共享*_*