您的位置:首页 > 网页制作 > Javascript

树形结构完全封装

日期:2006-07-06 12:53:03 点击: 来自: 作者:

<button onclick=s.moveNext()>next</button><button onclick=s.movePre()>pre</button><button onclick=s.reLoad()>reload</button>
<script>
function eyunTree(Tname)
  {if(typeof(Tname) != "string" || Tname == "")
     throw(new Error(-1, '创建类实例的时候请把类实例的引用变量名传递进来!'));
   this.O=null;
   this.tree="";
   this.nodes=new Array();
   this.header="<table border='0'  height='20' cellspacing='0' cellpadding='1'>rn";
   this.footer="</table>rn";
   this.style= "<style type='text/css'>rn";
   this.style+="  td{white-space: nowrap;font:9pt/150% '宋体';}rn";
   this.style+="  .on{cursor:hand;background-color:#B5BED6;border:1px solid #08246B;}rn";
   this.style+="  .click{cursor:hand;background-color:#FFFFFF;border:1px solid #B5BED6;}rn";
   this.style+="</style>";
   this.addNode=function (parent,text,hasChild,href,target)
                  {if(hasChild!=1 && arguments.length!=5)
                     throw(new Error(-2, '参数错误!'));
                   var nodeHeader="  <tr style='display:none'>rn    <td><table style='margin-left:15' border='0'  height='20' cellspacing='0' cellpadding='1'>rn";
                   var nodeFooter="</table></td>rn  </tr>rn";
                   var treeHead="  <tr>rn";
                   treeHead+=   "    <td><span onclick='"+Tname+".nodeClick(this)' onmouseout='"+Tname+".nodeOut(this)' onmouseover='"+Tname+".nodeOver(this)'";
                   var treeFoot="</span></td>rn";
                   treeFoot+=   "  </tr>rn";
                   var treeNode=treeHead+"hasChild='"+hasChild+"'";
                   if(hasChild!=1)
                     {treeNode+=" href='"+href+"' target='"+target+"'";
                      var src="comm/img/tree/leaf.gif";
                     }
                   else
                     var src="comm/img/tree/shrink.gif"
                   treeNode+="><img src='"+src+"' align='absmiddle'>"+text+treeFoot;
                   if(parent=="root")
                      treeNode=this.header+treeNode;
                   if(hasChild==1)
                     {treeNode+=nodeHeader;
                     }
                   if(this.tree!="" && this.nodes.length!=0)
                     {if(parent=="root")
                        {while(this.nodes.length>0)
                           {this.tree+=nodeFooter;this.nodes.length--}
                         this.tree+=this.footer;
                        }
                      else
                        {if(this.nodes[this.nodes.length-1]!=parent && this.tree.lastIndexOf(parent)!=this.tree.length-parent.length)
                           {while(this.nodes.length-1>0)
                             {if(this.nodes[this.nodes.length-1]!=parent)
                                this.tree+=nodeFooter;
                              else
                                break;
                              this.nodes.length--
                             }                             
                           }
                         }
                     }
                   if(this.nodes[this.nodes.length-1]!=parent)
                     this.nodes[this.nodes.length]=parent;
                   this.tree+=treeNode;
                   return treeNode;
                  }
    this.nodeOver=function (o)
                  {o.oldClass=o.className;
                   o.className="on";
                  }
    this.nodeOut=function (o)
                   {o.className=o.oldClass;
                   }
    this.nodeClick=function (o)
                     {if(o.hasChild=="1")
                        {if(o.type=="open")
                           this.treeClose(o);
                         else
                           this.treeOpen(o);
                        }
                      else
                        {tmpA.href=typeof o.href=="undefined"?"#":o.href;
                         tmpA.target=typeof o.target=="undefined"?"_self":o.target;
                         tmpA.click();
                        }
                      if(this.O!=null)
                        this.O.className=this.O.oldClass="";
                      this.O=o;
                      o.oldClass=o.className="click";
                     }
    this.treeClose=function (o)
                     {o=o.parentElement.parentElement;
                      o.nextSibling.style.display="none";
                      o.firstChild.firstChild.firstChild.src="comm/img/tree/shrink.gif";
                      o.firstChild.firstChild.type="close";
                     }

    this.treeOpen=function (o)
                    {o=o.parentElement.parentElement;
                     o.nextSibling.style.display="";s
                     o.firstChild.firstChild.firstChild.src="comm/img/tree/unwrap.gif";
                     o.firstChild.firstChild.type="open";
                    }
    this.moveNext=function ()
                    {var o=document.getElementsByTagName("SPAN");
                     var l=o.length;
                     if(this.O==null)
                       {o[0].click(o[0]);  
                        return true;
                       }
                     for(var i=0;i<l;i++)
                       if(o[i].className==this.O.className)
                         break;
                    if(i<l-1)
                      o[i+1].click(o[i+1]);
                    else
                      o[i].click(o[i]);
                    }
    this.movePre=function ()
                   {var o=document.getElementsByTagName("SPAN");
                    var l=o.length;
                    if(this.O==null)
                      {o[0].click(o[0]);  
                       return true;
                      }
                    for(var i=0;i<l;i++)
                      if(o[i].className==this.O.className)
                        break;
                    if(i<l && i>0)
                      {var oP=o[i-1].parentElement;
                       var oC=null;
                       while(oP!=document.body)
                         {if(oP.tagName=="TR" && oP.style.display=="none")
                            {oP.style.display="";
                             oP.previousSibling.firstChild.firstChild.firstChild.src="comm/img/tree/unwrap.gif";
                             oP.previousSibling.firstChild.firstChild.type="open";
                            }
                          oP=oP.parentElement;
                         }
                       o[i-1].click(o[i-1]);
                      }
                    else
                      o[0].click(o[0]);
                   }
    this.reLoad=function ()
                  {var o=document.getElementsByTagName("SPAN");
                   var l=o.length;
                   if(this.O==null)
                     {o[0].click(o[0]);  
                      return true;
                     }
                   for(var i=0;i<l;i++)
                     if(o[i].className==this.O.className)
                       break;
                   if(i<l)
                     o[i].click(o[i]);
                   else
                     o[0].click(o[0]);
                  }
    this.show=function ()
                {document.writeln(this.style);
                 document.writeln(this.tree);
                 document.writeln("<a id='tmpA'></a>");
                }
   }
  var s=new eyunTree("s")
  var n=s.addNode("root","testRoot1",1)
  var a=s.addNode(n,"testNode1",1)
  s.addNode(a,"testNodeChild1",0,"http://www.iecn.net","_blank")
  s.addNode(a,"testNodeChild2",0,"http://www.iecn.net","_blank")
  var t=s.addNode(a,"testNodeChildNode1",1)
  s.addNode(t,"testNodeChild1",0,"http://www.iecn.net","_blank")
  s.addNode(t,"testNodeChild2",0,"http://www.iecn.net","_blank")
  s.addNode(n,"testChild2",0,"http://www.iecn.net","_blank")
  s.addNode(n,"testChild3",0,"http://www.chinaddv.com","_blank")
  var o=s.addNode("root","testRoot2",1)
  s.addNode(o,"testChild1",0,"http://www.chinaddv.com","_blank")
  d=s.addNode(o,"testChild2",1)
  s.addNode(d,"testChild1",0,"http://www.chinaddv.com","_blank")
  e=s.addNode(d,"testChild1",1)
  s.addNode(e,"testChild1",0,"http://www.chinaddv.com","_blank")
  s.addNode(e,"testChild1",0,"http://www.chinaddv.com","_blank")
  s.addNode(e,"testChild1",0,"http://www.chinaddv.com","_blank")
  s.addNode(d,"testChild1",0,"http://www.chinaddv.com","_blank")
  s.addNode(o,"testChild3",0,"http://www.chinaddv.com","_blank")
  s.show();
</script>

More..素材图片 Picture Navigation
相关链接 Correlation Link
Javascript热门 Class Hot
Javascript推荐 Class Commend
版权所有:中国网站资源 2005- 未经授权禁止复制或建立镜像 This Site Tech:XHTML+DIV+CSS+Javascript
CopyRight ® 2005- www.chinaddv.com online services. all rights reserved. ICP06016627
Optimized to 1024x768 to Firefox,Netscape,Opera,MS-IE6+.