根据数组里的数据生成树型图的算法（高分相送！！！）

下面是一个用javascript写的结构化很好的树，并且也很容易看懂
你可以用来改改就行了。<html>
<head>
<title>Tree</title>
<META content="text/html; charset=gb2312" http-equiv=Content-Type>
<style type=text/css>
.p1{FONT-FAMILY:宋体;FONT-SIZE:14px;COLOR:#0000FF}
A{FONT-FAMILY:宋体; FONT-SIZE:14px;TEXT-DECORATION:none;COLOR:#0000FF}
IMG{VERTICAL-ALIGN:text-top}
</style>
<script language=javascript>
<!--
function w(txt){document.write(txt);}
var root,ID=0;
var na=new CHILD();
var gif="/images/";
var curfocus;function CHILD() //节点孩子集合定义
{
this.total=0;
this.Add=Add;
this.Delete=Delete;
return this;
}
function Add(childnode)
{
this[this.total]=childnode;
this.total++;
}function Delete(childnode)
{
for(var i=0;i<this.total;i++)
if(childnode==this[i])break;
if(i!=this.total)this.total--;
for(;i<this.total;i++)
this[i]=this[i+1];
}function NODE(name) //节点定义
{
this.id=ID;
this.name=name;
this.imgopsm="";
this.imgclbg="";
this.imgclsm="";
this.parent="";
this.child=new CHILD();
this.link="";
this.target="";
this.display=true;
na.Add(this);
ID++;
return this;
}function DispNode(node,deep,corner,rout) //显示树的节点
{
var i,m;
var have=(node.child.total>0);
w("<TR><TD height=16 width=100% class=p1>");
for(i=0;i<deep;i++)
if(!rout[i])w("<IMG height=16 width=16 src="+gif+"line.gif>");
else w("<IMG height=16 width=16 src="+gif+"none.gif>");
if(corner>0)
{
if(corner==1){m="last";rout.Add(true);}
else{m="mid";rout.Add(false);}
if(!have)w("<IMG height=16 width=16 src="+gif+m+"nd.gif>");
else{
w("<IMG height=16 width=16 src="+gif+m);
if(node.display)w("minu");
else w("plus");
w(".gif id="+node.id+" onclick=ClickND()>");
}
}
w("<IMG height=16 id=n"+node.id+" src="+node.imgclsm+" width=16 onclick=ClickNode() style=cursor:hand");
if(node.link!="")
{
w("><A href="+node.link);
if(node.target!="")w(" target="+node.target);
}
w(">"+node.name);
if(node.link!="")w("</A>");
w("</TD></TR>");
if(have)
{
w("<TR><TD id=t"+node.id+" class=p1");
if(!node.display)w(" style=display:none");
w("><TABLE align=left border=0 cellPadding=0 cellSpacing=0 width=100%>");
for(i=0;i<node.child.total;i++)
{
m=rout.total;
DispNode(node.child[i],deep+1,node.child.total-i,rout);
rout.total=m;
}
w("</TABLE></TD></TR>");
}
}
function ShowTree() //显示树
{
var rout=new CHILD();
w("<TABLE align=left border=1 cellPadding=0 cellSpacing=0 width=100%>");
DispNode(root,-1,0,rout);
w("</TABLE>");
}
function ClickND() //展开、收回函数
{
var m1,m2,index;
var src=window.event.srcElement;
var tag=document.all("t"+src.id);
na[eval(src.id)].display=!na[eval(src.id)].display;
if(na[eval(src.id)].display)
{
index=src.src.indexOf("plus",0);
if(index>0)
{
m1=src.src.substring(0,index);
m2=src.src.substring(index+4,src.src.length);
src.src=m1+"minu"+m2;
}
tag.style.display="";
}else{
index=src.src.indexOf("minu",0);
if(index>0)
{
m1=src.src.substring(0,index);
m2=src.src.substring(index+4,src.src.length);
src.src=m1+"plus"+m2;
}
tag.style.display="none";
}
}
function ClickNode() //切换文件夹焦点
{
var src=window.event.srcElement;
var tid=eval(src.id.substring(1,src.id.length));
if(na[tid]!=curfocus)
{
if(curfocus.id>0)document.all("n"+curfocus.id).src=curfocus.imgclsm;
curfocus=na[tid];
if(curfocus.id>0)src.src=curfocus.imgopsm;
}
}
function InitTree() //初始化树，在这里定义树结构
{
var i;
rootname="我的树";
root=new NODE(rootname);
root.imgclsm=gif+"rootsm.gif";
var node;
node=new NODE("电脑爱好者网站");
node.imgclsm=gif+"close.gif";
node.imgopsm=gif+"open.gif";
root.child.Add(node);
node=new NODE("文件夹");
node.imgclsm=gif+"close.gif";
node.imgopsm=gif+"open.gif";
root.child.Add(node);
for(i=2;i<5;i++)
{
node=new NODE("文件夹"+i);
node.imgclsm=gif+"close.gif";
node.imgopsm=gif+"open.gif";
root.child[1].child.Add(node);
}
root.child[1].child[1].display=false;
for(i=5;i<10;i++)
{
node=new NODE("文件夹"+i);
node.imgclsm=gif+"close.gif";
node.imgopsm=gif+"open.gif";
root.child[1].child[1].child.Add(node);
}
node=new NODE("文件夹10");
node.imgclsm=gif+"close.gif";
node.imgopsm=gif+"open.gif";
root.child.Add(node);curfocus=root;
}
//-->
</script>
</head>
<body bgColor=#f8f088 style="FONT-FAMILY:宋体;FONT-SIZE:14px">
<script>
<!--
InitTree();
ShowTree();
-->
</script>
</body>
</html>

解决方案 »

  1.   

    简单的写了一下，供你参考
    <script>
    ar = new Array (
    "父节点1-子节点1-数据1",
    "父节点1-子节点1-数据2",
    "父节点1-子节点2",
    "父节点1-子节点3",
    "父节点2-子节点1",
    "父节点2-子节点2",
    "父节点2-子节点2-数据1",
    "父节点2-子节点2-数据2-数值1",
    "父节点2-子节点2-数据2-数值2"
    );tmp = new Array;
    for(i=0;i<ar.length;i++) {
      Item = ar[i].split("-");
      for(j=0;j<Item.length;j++) {
        if(i==0) {
          tmp[j] = Item[j];
          document.write(genSpace(j)+Item[j]+"<br>");
        }else if(tmp[j] != Item[j]) {
          tmp[j] = Item[j];
          document.write(genSpace(j)+Item[j]+"<br>");
        }
      }
    }function genSpace(n) {
      var s = "";
      for(var i=0;i<n;i++)
        s += "&nbsp;";
      return s;
    }
    </script>
      

  2.   

    谢谢rengs(冷雨) 您提出的树型图程序，我会把原代码收藏同时十分佩服 xuzuning(唠叨) 您提供的算法，简直是完美，算法有效率十分之高，也解决了我苦思不得其解的问题，在这里向您表示真挚的感谢。我猜您也是计算机专业的吧，希望我们能交个朋友好吗，以后能够共同研究问题，谢谢！！！