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

评论

8 楼 siye1982 2009-09-03  

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

7 楼 rowanh 2009-09-03  

 $(document).ready(function(){
	$('img[id^=tImgT]').each(function(){
		var id=$(this).attr('id').replace('tImgT','');
		var value=id.replace('parent','');
		if(value!='0'){
			var cb="<input type='checkbox' name='ids' id='cb"+id+"' "+
				" onclick='doCheck(&quot;"+id+"&quot;)'  value='"+value+"' "+
				"style='width:12px;height:12px;vertical-align:middle;' />";
			$(this).before(cb);
		}
	});
});
function doCheck(id){
	if($('#cb'+id).attr('checked')==true){
		while(1){
			var pid=r.list[id].pid;
			if(pid==0){
				break;
			}else{
				$('#cb'+pid).attr('checked',true);
				id=pid;
			}
		}
	}else{
		$('#tDiv'+id+' input').attr('checked',false);
	}
}

附上自己写的checkbox补丁代码（只针对特殊需求，不能直接套用）。
正好那时有个需求要求树上要加checkbox，数据不多不到100，就没有用lazy，通过jquery在页面加载完后，添加checkbox。
这个需求是，点击节点，上级都被选中。上级被点击不选中，子节点都不被选中，没有大家常见的选中父节点，子节点都被选中的功能。当然要改成那样也不难，有jquery在。

6 楼 axhack 2009-09-03  

兄弟你这个是好东西，正用着呢

5 楼 rowanh 2009-09-03  

盼星星，盼月亮，终于又等到了一个回帖。
真希望有更多的回帖啊。。。。
知不足，方能补已。
使用中有啥问题，又或者需要解释的。。
多提提。。。
强烈期待下一个回帖中

4 楼 lzl836 2009-09-03  

很好很强大！

3 楼 rowanh 2009-09-02  

终于有一个回帖了。。太高兴了。。。

想7月的时候，拿自己的js树，和dtree比效率，我几百个节点就死掉，他可以上千左右才死。
才知道，全部代码一次innerHTML比一个个节点逐次的添加，效率要高好多。
再到偶然想到，静态的延迟构造，一次加载数据，一层层构造树。
主要就是ajax树，没点开前都认为是根，前面有个+号，而我这里却已近知道有没有子节点，不会显示这个不需要的+号。也不用一次一次的调服务器数据。
再到经过测试，能加载25万个节点不死机，当时那个乐的呀。。。。

2 楼 bh134 2009-09-02  

很不错~~~刚下载了用了下 觉得还是很好用的
测试的时候没开延时。。。直接无响应 T.T

1 楼 rowanh 2009-09-02  

r.setLazy(true);//延时构造
for(var i=11;i<10011;i++){//随机生成10000个节点
	r.add(i,parseInt(Math.random()*i),"测试"+i);
}

大家测得时候可以把例子中的这两句代码换一下：
开启延时构造r.setLazy(true);
添加10000个节点。

250000的极限负载量，在遨游下测试，要十几秒，并且可能会报，脚本会造成无响应。点继续，树能出来。

这里就体现火狐的快了，在火狐下 250000数据，5秒能出来。

数据多了，不设r.setLazy(true);绝对会卡死。

我把改好内容的页面上传了，就不用大家自己改了。
（貌似自己改改，还比下载——打开压缩包——取出文件——覆盖原文件  快！）