js源码--树

// 这是转贴的

< 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'> ";
   this.footer="</table> ";
   this.style= "<style type='text/css'> ";
   this.style+="  td{white-space: nowrap;font:9pt/150% '宋体';} ";
   this.style+="  .on{cursor:hand;background-color:#B5BED6;border:1px solid #08246B;} ";
   this.style+="  .click{cursor:hand;background-color:#FFFFFF;border:1px solid #B5BED6;} ";
   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'>     <td><table style='margin-left:15' border='0'  height='20' cellspacing='0' cellpadding='1'> ";
                   var nodeFooter="</table></td>   </tr> ";
                   var treeHead="  <tr> ";
                   treeHead+=   "    <td><span οnclick='"+Tname+".nodeClick(this)' οnmοuseοut='"+Tname+".nodeOut(this)' οnmοuseοver='"+Tname+".nodeOver(this)'";
                   var treeFoot="</span></td> ";
                   treeFoot+=   "  </tr> ";
                   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.51js.com " , " _blank " )
   var  o = s.addNode( " root " , " testRoot2 " , 1 )
  s.addNode(o, " testChild1 " , 0 , " http://www.51js.com " , " _blank " )
  d = s.addNode(o, " testChild2 " , 1 )
  s.addNode(d, " testChild1 " , 0 , " http://www.51js.com " , " _blank " )
  e = s.addNode(d, " testChild1 " , 1 )
  s.addNode(e, " testChild1 " , 0 , " http://www.51js.com " , " _blank " )
  s.addNode(e, " testChild1 " , 0 , " http://www.51js.com " , " _blank " )
  s.addNode(e, " testChild1 " , 0 , " http://www.51js.com " , " _blank " )
  s.addNode(d, " testChild1 " , 0 , " http://www.51js.com " , " _blank " )
  s.addNode(o, " testChild3 " , 0 , " http://www.51js.com " , " _blank " )
  s.show();
</ script >

// 通过上面的思路写的,以上是封装好的所以比较麻烦

<style>
td{white-space: nowrap;font:9pt/150% 'ËÎÌå'};
.on{cursor:hand;background-color:#B5BED6;border:1px solid #08246B};
.click{cursor:hand;background-color:#FFFFFF;border:1px solid #B5BED6};
</style>
<html>
<body>
<button οnclick="moveNext()">next</button><button οnclick="movePre()">pre</button><button οnclick="reLoad()">reload</button>
</body>
</html>
<script language="JavaScript">
var obj,obj1,flag=0;
function addNode(parent,text,hasChild,href){
if(hasChild==0){
var row=eval(parent).insertRow()
var col=row.insertCell()
col.innerHTML="<span οnclick='nodeClick(this,/""+href+"/")' οnmοusemοve='nodeOver(this)' οnmοuseοut='nodeOut(this)'><img src='page.gif' align='absmiddle' border='0' >"+text+"</span>"
}
else{
var row=eval(parent).insertRow()
var col=row.insertCell()
col.innerHTML="<span οnclick='nodeClick(this,/""+href+"/")' οnmοusemοve='nodeOver(this)' οnmοuseοut='nodeOut(this)'><img src='plus.gif' align='absmiddle' border='0' >"+text+"</span>"
var row1=eval(parent).insertRow()
var col1=row1.insertCell()
col1.innerHTML="<table id="+text+" style='margin-left:15' border='0' height='20' cellspacing='0' cellpadding='1'></table>"
row1.style.display="none"
}
}

function nodeClick(o,text){
var p=document.getElementsByTagName("SPAN");
l=p.length;
for(var i=0;i<p.length;i++){
p[i].className=""
}
obj1=o;
o.className="on"
if(o.childNodes[0].src=="http://localhost/minus.gif"){
o.childNodes[0].src="http://localhost/plus.gif"
if(o.parentNode.parentNode.nextSibling){
obj=o.parentNode.parentNode
obj.nextSibling.style.display="none"
}
}
else if(o.childNodes[0].src=="http://localhost/plus.gif"){
o.childNodes[0].src="http://localhost/minus.gif"
if(o.parentNode.parentNode.nextSibling){
obj=o.parentNode.parentNode
obj.nextSibling.style.display="";
}
}
else if(o.childNodes[0].src=="http://localhost/page.gif"){
document.getElementById("tmpA").href=text;
document.getElementById("tmpA").target="_blank"
document.getElementById("tmpA").click();
}
}

function nodeOver(o){
o.className="on";
}
function nodeOut(o){
o.className=""
}

function reLoad(){
var o=document.getElementsByTagName("SPAN");
l=o.length;
if(flag==0){
for(var i=0;i<l;i++){
oP=o[i].parentNode
while(oP!=document.body){
if(oP.tagName=="TR" && oP.style.display=="none"){
oP.style.display="";
oP.previousSibling.firstChild.firstChild.firstChild.src="http://localhost/minus.gif";
}
oP=oP.parentElement;
}
}
flag=1
}
else{
for(var i=0 ;i<l-1;i++){
if(o[i].firstChild.src=="http://localhost/minus.gif" ){
o[i].firstChild.src="http://localhost/plus.gif"
oP=o[i].parentNode
while(oP.tagName!="TR"){
oP=oP.parentElement;
}
oP.nextSibling.style.display="none"
}
}
flag=0
}
}

function movePre(){
if(obj1==null)return;
var o=document.getElementsByTagName("SPAN");
l=o.length;
for(var i=0;i<o.length;i++){
if(o[i]==obj1){
break;
}
}
if(i>0&&i<l){
if(o[i].childNodes[0].src=="http://localhost/minus.gif"){
o[i].click();
}
else{
o[i-1].click();
}
}
}

function moveNext(){
if(obj1==null)return;
var o=document.getElementsByTagName("SPAN");
l=o.length;
for(var i=0;i<o.length;i++){
if(o[i]==obj1){
break;
}
}
if(i>=0&&i<l-1){
if(o[i].childNodes[0].src=="http://localhost/plus.gif"){
o[i].click();
}
else {
o[i+1].click();
}
}
}

window.οnlοad=init;
function init(){
mainTable=document.createElement("table");
mainTable.id="root"
document.body.appendChild(mainTable)

href=document.createElement("a");
href.id="tmpA"
document.body.appendChild(href)

addNode("root","testRoot1",1)
addNode("testRoot1","testRoot1_1",1)
addNode("testRoot1_1","testRoot1_1_1",1)
addNode("testRoot1_1_1","testRoot1_1_1_1",0,"http://163.com")
addNode("testRoot1_1_1","testRoot1_1_1_2",0,"#")
addNode("testRoot1_1_1","testRoot1_1_1_3",0,"#")
addNode("root","testRoot2",1)
addNode("testRoot2","testRoot2_1",1)
addNode("testRoot2_1","testRoot2_1_1",1)
addNode("testRoot2_1_1","testRoot2_1_1_1",0,"#")
addNode("testRoot2","testRoot2_2",0,"#")
}
</script>