简单的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();

评论

28 楼 习惯在马桶上思考 2009-09-04  

明显速度太慢了...打开一个节点都要1S左右

27 楼 ownraul 2009-09-04  

来试试看~~项目中设计到树的东西确实处理起来比较麻烦..

26 楼 fantasybei 2009-09-04  

lz给弄个zip的包上来吧，我这里没有解压rar的

25 楼 rowanh 2009-09-04  

javadaydayup 写道

确实很好哦，不过有点问题要完善啊
就是开了延迟加载后（随便加个10000结点），点全部展开也会死机哦

基本上，开启延迟加载就是因为数据太多，一次加载会死机。点打开全部 等同于 全部加载。
所以用了延迟加载后，全部打开的按钮得去掉。

24 楼 rowanh 2009-09-04  

感谢各位的支持啊，太感谢了！！

其实我也知道这个树有局限性。
例如 一个页面只能构造一个树。
但是很好改，只要在rtree的构造函数上加个容器名称就好，树里面拼接ID时，把容器名拼进去。
代码很简单，方便大家自己根据需求修改。

当然，最好是用jquery方式打补丁。这样一个项目一个核心树js，根据不同页面的需求，各自修改。

23 楼 javadaydayup 2009-09-04  

确实很好哦，不过有点问题要完善啊
就是开了延迟加载后（随便加个10000结点），点全部展开也会死机哦

22 楼 viMory 2009-09-04  

经试用，这个很好用！谢谢rowanh分享！

21 楼 dugujiujian 2009-09-04  

在试用用.如果好的话.直接用这个做树

20 楼 rowanh 2009-09-04  

当时想出非ajax的lazy构造树的方法后，用10000条随机数据一试，居然一秒不到就出来了。当时很高兴，当然要测出最大负载量咯，于是50万，40万，30万都假死，20万卡了几秒后出来，再到中间值25万能出来。其实应该还能多点。
这也只能作为一个参数看看啦，一般的树也就几百，上千了。

做出这个功能主要是为了：在树节点不是特别多的情况下，可以不用ajax树，直接用这个树，减少服务端的访问次树，充分利用客户端资源（现在大家的电脑配置都不错的）

19 楼 lengyue333 2009-09-04  

25万节点的树，全部显示在页面上，确实很难实现。就算一个25万次的循环，浏览器就会提问是否继续，但是我在想，什么样的树或者什么样的业务会有25万个节点，25数数都要好几天，并且处理起来非常影响浏览器的速度。

18 楼 supercrsky 2009-09-04  

支持！　不错！

17 楼 makemyownlife 2009-09-04  

原创的精神可嘉，有时间仔细研究研究 呵呵

16 楼 lib 2009-09-04  

比dtree的效率高？

好东西，下来看看。可以用到我们公司的项目中。

支持原创！！！

但是不知道是否支持多浏览器？例如：chrome、safari。

15 楼 xzj127 2009-09-04  

25W 个？？？这个。。太厉害了。。

下来看看。

14 楼 rowanh 2009-09-03  

風一樣的男子 写道

基于Jquery的？最自己也想花些时间写些UI，可以前没搞过，都不知如何下手

树是纯js的，没用框架。
额外的功能是用jquery实现的
例如 点击节点变颜色r.canAlterbg(true)，多选框。实在是因为用jquery加功能那个方便啊。

说起搞UI，我最早是从看犀牛书（著名的javascript权威指南）开始的，那时不会js调试.出了错只好慢慢找。
那是个困难的时期啊，那时候感觉js比java上手难，没调试。。。当时就是有空就啃犀牛书，写写示例代码。

最早写的是一个无限走马灯，就是无缝隙的能上下左后滚动。那时知道了有个很好的UI叫ext，就看着ext的例子（只看运行效果，没看代码）模仿了十几个它的效果，GridView等等。。。
其实只要知道了界面移动就是坐标变变，定时调移动方法，一通百通的。

注：写js不能用写字板,我有几次用写字板改了下代码后保存，就报对象不存在错误，还好有留以前的版本。

贴个自己版本的GridView图，就是前台分组排序，改分数。美工没好好弄。。。

13 楼 風一樣的男子 2009-09-03  

基于Jquery的？最自己也想花些时间写些UI，可以前没搞过，都不知如何下手

12 楼 rowanh 2009-09-03  

感谢各位的支持！
作为程序员，我觉得做的东西能被更多的人使用，是最开心不过的了。
这个树在1.2的时候还是很菜的。。后来同事改老项目的时候，发现老项目里的树，又难看又慢，代码一大堆，改起来又麻烦。这时我毛遂自荐了自己的树，同事要求至少要比dtree好。经过修改终于比的上dtree了。人家N年前写出来的。。。。敬礼

后来又根据各种客户的需求做了改进，有的是写在主代码里，有的是以jquery打补丁上去，像前面的checkbox。
还是有个自己写的树好，要什么特殊需求，自己改。

11 楼 fangzaixiang 2009-09-03  

不错，有时间，我也自己写一下，到时跟你的比比，哈哈

10 楼 02221021 2009-09-03  

呵呵,支持一下,记得我第一次写js的时候就是给dtree加上键盘事件,前后搞了1个多月才搞好.从这以后竟然从java转到了js.

9 楼 rowanh 2009-09-03  

siye1982 写道

确实是很不错的树,不知道有没有跨浏览器的问题,等一会试一下别的firefox

个人测的时候，用过IE6、IE7、IE8、firefox3。
其中firefox3最快。
我给我朋友用时，记得他用360浏览器，target参数会无效。
自己是没碰到过。
感谢回帖，谢谢啊！！！