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事件


jsp

d = new dTree('d');
d.add('id','pid',' name ' ,'');
document.write(d);