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


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

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

[jscript]
view plain
copy
print?

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

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)最后加上：

[jscript]
view plain
copy
print?

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

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

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

 

[jscript]
view plain
copy
print?

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
.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
.id==pid){  
  
                    document.getElementById("c"+this.obj+n).checked=true;  
  
                    pid=this.aNodes
.pid;  
  
                    bSearch= true;      
  
                    break;  
  
                }  
  
            }  
  
        }while(bSearch==true);  
  
   }  
  
}  

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
.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
.id==pid){

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

pid=this.aNodes
.pid;

bSearch= true;

break;

}

}

}while(bSearch==true);

}

}

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