运用dtree组件动态生成目录树

怎么获取数据库数据生成树，可以参考前面一节《运用dtree组件动态生成带复选框的目录树》，在这主要讲述怎么通过修改JS组件动态生成带复选框的目录树：

1.给树对象的 config 对象添加一个控制 checkbox 是否显示的属性；

view plain copy to clipboard print ?

1. this.config = {   
2.   target      : null,   
3.   folderLinks    : true,   
4.   useSelection   : true,   
5.   useCookies    : true,   
6.   useLines     : true,   
7.   useIcons     : true,   
8.   useStatusText   : false,   
9.   closeSameLevel : false,   
10.   inOrder      : false,   
11.   check:true   //**新加的   
12. }   

   this.config = {
     target      : null,
     folderLinks    : true,
     useSelection   : true,
     useCookies    : true,
     useLines     : true,
     useIcons     : true,
     useStatusText   : false,
     closeSameLevel : false,
     inOrder      : false,
     check:true   //**新加的
   } 

 2.修改节点对象的 toString()方法，添加...input type="checkbox"...代码；在dtree 的dTree.prototype.node = function(node, nodeId)方法的if (this.config.useIcons)最后加上：

view plain copy to clipboard print ?

1. if(this.config.check==true){   
2.       str+= '<input type="checkbox" id="c'+ this.obj + nodeId + '" οnclick="javascript:'+this.obj+'.cc('+nodeId+')"/>';   
3. }  

if(this.config.check==true){
      str+= '<input type="checkbox" id="c'+ this.obj + nodeId + '" οnclick="javascript:'+this.obj+'.cc('+nodeId+')"/>';
}

3.写 checkbox 页面元素的 onclick 事件处理函数

 

view plain copy to clipboard print ?

1. dTree.prototype.cc=function(nodeId){   
2.   
3.     var cs = document.getElementById("c"+this.obj+nodeId).checked;   
4.   
5.     var n,node = this.aNodes[nodeId];   
6.   
7.     var len =this.aNodes.length;   
8.   
9.     for (n=0; n<len; n++) {   
10.   
11.         if (this.aNodes[n].pid == node.id) {               
12.   
13.             document.getElementById("c"+this.obj+n).checked=cs;            
14.   
15.             this.cc(n);            
16.   
17.         }          
18.   
19.     }   
20.   
21.     if(cs==false){     
22.   
23.         var clicknode=node   
24.   
25.         do{   
26.   
27.             for(j=0;j<len;j++){             
28.   
29.                 if(this.aNodes[j].pid==clicknode.pid&&document.getElementById("c"+this.obj+j).checked==true){                  
30.   
31.                     return;   
32.   
33.                     }   
34.   
35.             }   
36.   
37.             if(j==len){    
38.   
39.                 for(k=0;k<len;k++){   
40.   
41.                     if(this.aNodes[k].id==clicknode.pid){   
42.   
43.                         document.getElementById("c"+this.obj+k).checked=false;   
44.   
45.                         clicknode=this.aNodes[k];   
46.   
47.                         break;   
48.                     }      
49.   
50.                 }   
51.   
52.             }   
53.   
54.         }while(clicknode.pid!=-1);     
55.   
56.     }   
57.   
58.     if(cs==true){   
59.   
60.         var pid=node.pid;   
61.   
62.         var bSearch;   
63.   
64.         do{   
65.   
66.             bSearch=false;   
67.   
68.             for(n=0;n<len;n++){   
69.   
70.                 if(this.aNodes[n].id==pid){   
71.   
72.                     document.getElementById("c"+this.obj+n).checked=true;   
73.   
74.                     pid=this.aNodes[n].pid;   
75.   
76.                     bSearch= true;       
77.   
78.                     break;   
79.   
80.                 }   
81.   
82.             }   
83.   
84.         }while(bSearch==true);   
85.   
86.    }   
87.   
88. }  

dTree.prototype.cc=function(nodeId){

	var cs = document.getElementById("c"+this.obj+nodeId).checked;

	var n,node = this.aNodes[nodeId];

	var len =this.aNodes.length;

	for (n=0; n<len; n++) {

		if (this.aNodes[n].pid == node.id) {			

			document.getElementById("c"+this.obj+n).checked=cs;			

			this.cc(n); 		

		}		

	}

	if(cs==false){	

		var clicknode=node

		do{

			for(j=0;j<len;j++){			

				if(this.aNodes[j].pid==clicknode.pid&&document.getElementById("c"+this.obj+j).checked==true){				

					return;

					}

			}

			if(j==len){	

				for(k=0;k<len;k++){

					if(this.aNodes[k].id==clicknode.pid){

						document.getElementById("c"+this.obj+k).checked=false;

						clicknode=this.aNodes[k];

						break;
					}	

				}

			}

		}while(clicknode.pid!=-1);	

	}

	if(cs==true){

		var pid=node.pid;

		var bSearch;

		do{

			bSearch=false;

			for(n=0;n<len;n++){

     			if(this.aNodes[n].id==pid){

      				document.getElementById("c"+this.obj+n).checked=true;

      				pid=this.aNodes[n].pid;

      				bSearch= true;    

      				break;

     			}

    		}

   		}while(bSearch==true);

   }

}

在这引用了kakarot的baidu博客里的文章(http://hi.baidu.com/kakarot_java/blog/item/0925d5178a68c2044b90a7ae.html)，在这要感谢kakarot,我只是在他基础上加以改进，原先他的不足之处在于，当点中根节点时，所有的节点能选中，但当根节点的所有节点取消选中时，根节点不能自动也取消选中。