给Dtree添加Checkbox

最新推荐文章于 2018-09-11 14:40:00 发布

我在人间做项目

最新推荐文章于 2018-09-11 14:40:00 发布

阅读量2k

点赞数

文章标签： javascript function input 算法 null 工作

本文介绍如何为dtree插件添加checkbox功能，并实现选择时自动更新父子节点状态。通过简单的代码改造，使得dtree适用于更多场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

做 WEB 程序的人多数应该听说过 dtree，这个插件还不错，简单、效率还算可以，而且可以在cookie 中保存树的状态（刷新页面树会保持节点展开、收拢状态），如果节点量不是很大的情况下，是个不错的选择。但这个插件不带 checkbox。

dtree 的节点(Node)是个对象，所有节点保存在树(dTree)对象的一个属性里，重载了两个对象的 toString()函数，在页面显示的时候执行所有的 toString()操作。搞清程序的大致流程，改造工作就比较简单了，分以下几步：

1.给树对象的config 对象添加一个控制 checkbox 是否显示的属性；
    this.config = {
     target      : null,
     folderLinks    : true,
     useSelection   : true,
     useCookies    : true,
     useLines     : true,
     useIcons     : true,
     useStatusText   : false,
     closeSameLevel : false,
     inOrder      : false,
     check:false   //**新加的
   }

2.修改节点对象的toString()方法，添加...inputtype="checkbox"...代码；
   if(this.config.check==true){
    str+= '<input type="checkbox" id="c'+this.obj + nodeId + '" onclick="javascript:'+this.obj+'.cc('+nodeId+')"/>';
   }

3.写 checkbox 页面元素的 onclick 事件处理函数，这个函数用来智能控件树节点的 checkbox 状态。也就是说，勾选一个节点的 checkbox，自动勾选其所有父节点及其所有子节点；取消勾选节点的 checkbox，自动取消勾选其所有子节点的勾选状态，而其父节点的勾选状态不变。这个是个比较重要的新功能，一些具有 checkbox 的页面插件并不具备这个功能，这个功能使用递归算法实现。

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