为DTree添加复选框

为DTree添加上复选框可以让树的功能更加丰富,比如在做树形结构的时候可以点击选择多个树节点进行操作等等....

添加复选框的步骤:

1)dtree.js

在function dTree (objName) {

    this.config = {

        target : null,

        folderLinks : true,

        useSelection : true,

        useCookies : true,

        useLines : true,

        useIcons : true,

        useStatusText : false,

        closeSameLevel : false,

        inOrder : false,

        check : true
        // 检查是否有复选框

    }

添加上check属性.

 

2)dtree.js

添加代码:

dTree.prototype.node = function(node, nodeId) {

    var str = '<div class="dTreeNode">' + this.indent(node, nodeId);

    if (this.config.useIcons) {

        if (!node.icon)
            node.icon = (this.root.id == node.pid)
                    ? this.icon.root
                    : ((node._hc) ? this.icon.folder : this.icon.node);

        if (!node.iconOpen)
            node.iconOpen = (node._hc) ? this.icon.folderOpen : this.icon.node;

        if (this.root.id == node.pid) {

            node.icon = this.icon.root;

            node.iconOpen = this.icon.root;

        }

        str += '<img id="i' + this.obj + nodeId + '" src="'
                + ((node._io) ? node.iconOpen : node.icon) + '" alt="" />';

        //添加上复选框
        if (this.config.check == true) {

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

 

3)dtree.js

最后要为点中复选框的事件添加cc方法

//点击复选框onclick事件
dTree.prototype.cc=function(nodeId, nodePid){
   
   //首先获取这个多选框的id
    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 == nodeId) { //如果选中的是非叶子节点,则要将所有的子节点选择和父节点一样
            document.getElementById("c" + this.obj + this.aNodes[n].id).checked = cs;          
            this.cc(this.aNodes[n].id, nodeId);          
        }        
    } 
   
     if(cs==true){  //当前是选中状态
        var pid=nodePid; 
        var bSearch; 
        do{ 
            bSearch=false; 
            for(n=0;n<len;n++){  //循环每一个节点
                if(this.aNodes[n].id==pid){  //如果循环的节点的id等于PID
                    document.getElementById("c"+this.obj+pid).checked=true; //那么这个循环的节点应该被选中 
                    pid=this.aNodes[n].pid; 
                    bSearch= true;       
                    break;   
                }   
            }   
        }while(bSearch==true);
      }
     
      if(cs==false){      //如果被取消选择
        var pid = nodePid; 
        do{   
            for(j=0;j<len;j++){         //循环每一个多选框  如果这个节点的子节点有其他是选中的,则不取消
                if(this.aNodes[j].pid==pid && document.getElementById("c" + this.obj + this.aNodes[j].id).checked==true){                
                    return; 
                } 
            } 
            if(j==len){   //循环结束
                for(k=0;k<len;k++){   
                    if(this.aNodes[k].id==pid){   //如果找到父节点
                        document.getElementById("c"+this.obj+this.aNodes[k].id).checked=false;   
                        pid=this.aNodes[k].pid;  
                        break; 
                    }      
                }   
            }   
        }while(pid!=-1);     
    }
}
//复选框onclick事件

 

 

恭喜!完成以上三步后,dtree的复选框就打造完成了

新建一颗树:

d = new dtree('d');

d.check = true;          //只添加了这一段代码

d.add.......

................