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

dtree组件是一个纯JS的树,下载地址：www.destroydrop.com/javascript/tree/,项目中遇到复选框的需求，下面是对其做的更改：

1.给树对象的 config 对象添加一个控制 checkbox 是否显示的属性；
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)最后加上：

if(this.config.check==true){

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

}

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

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);

}

}