带checkbox的网页树形控件

作者：wallimn、邮件：[e-mail])
博客：http://blog.csdn.net/wallimn
时间：2007-08-31
声明：此文欢迎转载，转载请保留本人信息。如果对您有帮助，希望心存感激，呵呵。更多文章，请访问我的博客。

　　做WEB程序的人多数应该听说过dtree，这个插件还不错，简单、效率还算可以，而且可以在cookie中保存树的状态（刷新页面树会保持节点展开、收拢状态），如果节点量不是很大的情况下，是个不错的选择。我在好几个项目里都用到过。但这个插件不带checkbox，这不能不说是个遗憾，因为这个应用场合还是很多的。
　　现在对javascript程序有了较多的了解，决定自己给dtree添上这个功能，写这两句话的意思是告诉大家，在已有插件的基础上DIV并不是很困难，呵呵。just do it。
　　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()方法，添加...input type="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);
 }

 　基本这样这可以了。如果嫌以上叙述不清楚，或者想省事不想自己修改，可以跟我联系索取所有源码。
 　我还使用jsp对这个树形控件进行了封装，这个封装使用很简单。利用jsp:include标签包含我封装的jsp文件，传入参数(jsp:param)：从数据库中取记录的SQL语句，可自动在页面上根据数据库记录生成树形控件。如果你的系统中大量用到树形控件，这会对你有很大的帮助。 

　　请到我的网络硬盘下载：http://wallimn.ys168.com