带checkbox的网页树形控件

翻译|其它|编辑:郝浩|2007-09-10 10:27:32.000|阅读 1611 次

概述:

# 界面/图表报表/文档/IDE等千款热门软控件火热销售中 >>

  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  语句,可自动在页面上根据数据库记录生成树形控件。如果你的系统中大量用到树形控件,这会对你有很大的帮助。


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@evget.com

文章转载自:csdn

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP