运用dtree组件动态生成带复选框的目录树

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

view plain

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. }   

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

view plain

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

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

 

view plain

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. }