js源码--树

原创 2007年10月07日 22:07:00
//这是转贴的

<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 onclick='"+Tname+".nodeClick(this)' onmouseout='"+Tname+".nodeOut(this)' onmouseover='"+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<&& 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 onclick="moveNext()">next</button><button onclick="movePre()">pre</button><button onclick="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 onclick='nodeClick(this,/""+href+"/")' onmousemove='nodeOver(this)' onmouseout='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 onclick='nodeClick(this,/""+href+"/")' onmousemove='nodeOver(this)' onmouseout='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.onload=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>

jquery实现文件树目录、折叠目录树代码(兼容IE6,IE7)

例子简单,个人爱好,如有不足,可以共同探讨 foder.html代码如下 DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional...
  • h348592532
  • h348592532
  • 2013年11月26日 09:57
  • 4982

【JS 设计模式 】用组合模式来实现树形导航--代码结构思路分析(一)

树导航效果图:组合模式的描述:将对象组合成树形结构以表示“部分-整体”的层次结构,组合模式使得用户对单个对象和组合对象的使用具有一致性。我们把部分用Leaf表示, 把整体用Composite表示。组合...
  • itpinpai
  • itpinpai
  • 2016年04月24日 13:32
  • 7612

JS树形表格 (示例及代码下载)

第一次在CSDN上写文章,文理不好,不知道写得内容别人能不能看得懂,看不懂可不要骂我。 做WEB开发,有时候需要用树形表格的方式来显示一些有层级关系的数据,网上一时没有找到合适的代码,项目中又需要用到...
  • oukunqing
  • oukunqing
  • 2015年01月28日 16:30
  • 2901

D3.js中Treemap(矩形树图)源码详解

Treemap(矩形树图)聊一聊Treemap,即矩形树图,树形结构非常有意思的一种展现方式,外形规整而不失表达力。 矩形树状结构图(Treemap)是一种有效的实现层次结构可视化的图表结构,简称...
  • wan353694124
  • wan353694124
  • 2018年01月03日 10:35
  • 135

后台JS菜单树源码

  • 2008年03月05日 14:26
  • 40KB
  • 下载

两种JS生成树方式的源码

  • 2009年04月26日 22:14
  • 5.05MB
  • 下载

实现树分支的js控件dtree及其使用说明和相关例子,源码网站为(www.destroydrop.com/javascript/tree/)

  • 2009年03月17日 16:14
  • 32KB
  • 下载

JS 树的源码

  • 2007年06月14日 11:22
  • 111KB
  • 下载

js实现贪吃蛇小游戏代码(源码)

贪吃蛇游戏     //定义一个点对象     function Point(x,y){         this.x=x;         this.y=y;         th...
  • qq_34222743
  • qq_34222743
  • 2018年01月13日 19:32
  • 4

cocos2d_js 拼图游戏源码(点击互换版)

resource.jsvar res = { pt1_url:"res/pt_1.jpg", };var g_resources = []; for (var i in res) { ...
  • LingXi__Y
  • LingXi__Y
  • 2017年08月06日 15:04
  • 777
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:js源码--树
举报原因:
原因补充:

(最多只允许输入30个字)