关于dtree树代码实现带checkox修改的最新思路

最近，我突然要使用树形菜单，一直不知道是自己写好呢，还是自己从网上copy好。经过一些筛选，我觉得拿dtree代码来使用比较方便，同时我也可以学习到前辈们的经验。但是当拿到dtree代码时，我通过测试发现改代码并没有支持checkbox元素。我自己对该代码不是非常熟悉，我觉得还是先百度一下。原来网上已经有前辈通过修改dtree代码来实现让dtree对checkbox元素的支持。一开始，我看了代码发觉有点不知所云，觉得还是自己去研究一下dtree代码。通过代码的研究和结合前辈的经验，本人向广大网友提供个人觉得比较完善的修改代码。

第一步：添加属性

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

this.config = {

target : null,

folderLinks : true,

useSelection : true,

useCookies : true,

useLines :true,

useIcons :true,

useStatusText : false,

closeSameLevel : false,

inOrder : false,

useCheckbox:false //**新加的

}

第二步：修改dTree.prototype.node = function(node, nodeId) 方法

在该方法里添加一段代码，该代码放在if (this.config.useIcons)后面，即

if (this.config.useIcons)

{

.........

}

if (this.config.useCheckbox){

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

{/根节点不设置checkbox

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

}

}

第三步：添加onclick事件的实现方法。实现思路：当你选中或者撤销一个节点时，先判断该节点是否使得该节点得父节点也必须选中或者撤销，如果父节点必须选中或撤销，则设置父节点选中或者撤销状态，然后向上回溯。

直到回溯完毕后，判断该节点是否有子节点，如果有子节点，则设置子节点状态，然后向下继续回溯，直到不能再回溯。

代码如下：

//添加checkbox的onclick事件

dTree.prototype.cc = function(id) {

this.cc1(id);

this.cc2(id);

};

//向上回溯

dTree.prototype.cc1 = function(id) {

var cs =document.getElementById_x("c" + this.obj + id).checked;

var node =this.aNodes[id];

var n;

var j;

varpn;

var childs =[];

var flag =true;

var len =this.aNodes.length;

for (n=0;n<len ; n++) {

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

pn =n;

}

if(this.aNodes
.pid == node.pid) {

var tcs =document.getElementById_x("c" + this.obj + n).checked;

childs[childs.length] = tcs;

}

}

for (j=0;j<childs.length; j++) {

if(childs[j] != cs)

{

flag =false;

}

}

if(flag)

{

if (document.getElementById("c" + this.obj + pn) != null) {

//这个判断是因为我设置了根节点没有checkbox

document.getElementById("c" + this.obj + pn).checked = cs;

this.cc1(pn);

}

}

};

//向下回溯

dTree.prototype.cc2 = function(id) {

var cs =document.getElementById_x("c" + this.obj + id).checked;

var node =this.aNodes[id];

var n;

var len =this.aNodes.length;

for (n=0;n<len ; n++) {

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

document.getElementById_x("c" + this.obj + n).checked = cs;

this.cc2(n);

}

}

};

第四步：编写页面代码,代码如下：

<div class="dtree">

<p><a href="javascript: d.openAll();">open all</a> | <a href="javascript: d.closeAll();">close all</a></p>

<script type="text/javascript">

<!--

d = new dTree('d');

d.root = new Node('-1');

d.config.useIcons = false;

d.config.useCheckbox = true;

d.add('00','-1','My example tree');

d.add('01','00','Node 1','example01.html');

d.add('02','00','Node 2','example01.html');

d.add('001','01','Node 1.1','example01.html');

d.add('03','00','Node 3','example01.html');

d.add('0001','001','Node 1.1.1','example01.html');

d.add('00001','0001','Node 1.1.1.1','example01.html');

d.add('04','00','Node 4','example01.html');

d.add('002','01','Node 1.2','example01.html');

d.add('05','00','My Pictures','example01.html','Pictures I\'ve taken over the years','','','img/imgfolder.gif');

d.add('0501','05','The trip to Iceland','example01.html','Pictures of Gullfoss and Geysir');

d.add('0502','05','Mom\'s birthday','example01.html');

d.add('06','00','Recycle Bin','example01.html','','','img/trash.gif');

document.write(d);

//-->

</script>

</div>

总结：代码修改到这里，带checkbox的dtree改造已经完成。如果你想实现动态打开子节点的话，可以结合ajax来实现。