首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

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

2012-10-26 
运用dtree组件动态生成带复选框的目录树怎么获取数据库数据生成树,可以参考前面一节《运用dtree组件动态生

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

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

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

view plaincopy to clipboardprint?
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)最后加上:

view plaincopy to clipboardprint?
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 事件处理函数

view plaincopy to clipboardprint?
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[n].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[n].id==pid){??
?
??????????????????? document.getElementById("c"+this.obj+n).checked=true;??
?
??????????????????? pid=this.aNodes[n].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[n].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[n].id==pid){

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

????? ????pid=this.aNodes[n].pid;

????? ????bSearch= true;???

????? ????break;

???? ???}

??? ??}

?? ??}while(bSearch==true);

?? }

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

本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/kubete/archive/2008/06/21/2571949.aspx

热点排行