论坛首页 Web前端技术论坛

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

浏览 65054 次
该帖已经被评为精华帖
作者 正文
   发表时间:2009-09-02   最后修改:2009-09-04
这是我写的第一个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();

   发表时间:2009-09-02   最后修改:2009-09-03
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);绝对会卡死。

我把改好内容的页面上传了,就不用大家自己改了。
(貌似自己改改,还比下载——打开压缩包——取出文件——覆盖原文件  快!)
0 请登录后投票
   发表时间:2009-09-02  
很不错~~~刚下载了用了下 觉得还是很好用的
测试的时候没开延时。。。直接无响应 T.T
0 请登录后投票
   发表时间:2009-09-02   最后修改:2009-09-02
终于有一个回帖了。。太高兴了。。。

想7月的时候,拿自己的js树,和dtree比效率,我几百个节点就死掉,他可以上千左右才死。
才知道,全部代码一次innerHTML比一个个节点逐次的添加,效率要高好多。
再到偶然想到,静态的延迟构造,一次加载数据,一层层构造树。
主要就是ajax树,没点开前都认为是根,前面有个+号,而我这里却已近知道有没有子节点,不会显示这个不需要的+号。也不用一次一次的调服务器数据。
再到经过测试,能加载25万个节点不死机,当时那个乐的呀。。。。
0 请登录后投票
   发表时间:2009-09-03  
盼星星,盼月亮,终于又等到了一个回帖。
真希望有更多的回帖啊。。。。
知不足,方能补已。
使用中有啥问题,又或者需要解释的。。
多提提。。。
强烈期待下一个回帖中
0 请登录后投票
   发表时间:2009-09-03   最后修改:2009-10-08
兄弟你这个是好东西,正用着呢
0 请登录后投票
   发表时间:2009-09-03   最后修改: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在。
  • 大小: 8.3 KB
0 请登录后投票
   发表时间:2009-09-03  
确实是很不错的树,不知道有没有跨浏览器的问题,等一会试一下别的firefox
0 请登录后投票
   发表时间:2009-09-03  
siye1982 写道
确实是很不错的树,不知道有没有跨浏览器的问题,等一会试一下别的firefox

个人测的时候,用过IE6、IE7、IE8、firefox3。
其中firefox3最快。
我给我朋友用时,记得他用360浏览器,target参数会无效。
自己是没碰到过。
感谢回帖,谢谢啊!!!
0 请登录后投票
   发表时间:2009-09-03  
呵呵,支持一下,记得我第一次写js的时候就是给dtree加上键盘事件,前后搞了1个多月才搞好.从这以后竟然从java转到了js.
0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics