JavaScript 树

    //结点参数对象
 //主键 外键 名称 地址 目标框架
 function NodeParameter(id,pid,name,url,target)
 {
   this.id=id;
   this.pid=pid;
   this.name=name;
   this.url=url;
   this.target=target;
   this.index=0;
   this.isOpen=false;
   this.isChildNode=false;
 }
 //树形视图整体
 function TreeView()
 {
    //图标
    this.icon=
    {
       open:  "myTreeImage/open.gif",
                //备用
   // openicon: "myTreeImage/openicon.jpg",
    openicon: "myTreeImage/openicon1.jpg",

    close: "myTreeImage/close.gif",
    //备用
   // closeicon:"myTreeImage/closeicon.jpg",
    closeicon:"myTreeImage/closeicon1.jpg",
        //备用
   // page:  "myTreeImage/page.gif"
       page:  "myTreeImage/page1.jpg"
    };
  
    window.Tree=this;
    //结点集合
    this.nodes=[];
    // index 数组
    this.divChilds=[];
    //根结点起始对象
    this.root=new NodeParameter(0);

 }
 //树形件事
 function TreeViewOnMouseOver(Obj)
 {
  Obj.style.cursor="pointer";
  Obj.style.color="red";
  if(Obj.className=="nameSpan")
  {
   Obj.style.textDecoration="underline";
   
  }
  
  
 }
 //树形件事
 function TreeViewOnMouseOut(Obj)
 {
  Obj.style.cursor="pointer";
  Obj.style.color="blue";
  if(Obj.className=="nameSpan")
  {
   Obj.style.textDecoration="none";
   
  }

 }
//为树扩展加结点
TreeView.prototype.addNode=function(id,pid,name,url,target)
{
 //实例化第个结点对象
 this.nodes[this.nodes.length]=new NodeParameter(id,pid,name,url,target);
}
//为树扩展委托到JavaScript中toString()方法
TreeView.prototype.toString=function()
{
 //整个树形结构中脚本字符串
 var TreeViewString="";
  
  TreeViewString+="<div>";
  
  TreeViewString+=this.addChildNode(this.root);

  TreeViewString+="</div>";

 return TreeViewString;
}
//为树扩展添加其下的子结点
TreeView.prototype.addChildNode=function(node)
{
  var str="";
 //遍历所有结点
 for(var i=0;i<this.nodes.length;i++)
 {
  //临时存放结点元素
  var ElementNode=this.nodes[i];
  //保存当前结点下标
  ElementNode.index=i;
  
  
   //判定传入参数的结点是否有子结点
   if(ElementNode.pid==node.id)
   {
   //判定此子结点下是否还存在子结点
   this.SetNodeAttribute(ElementNode);

   str+="<div>";
   //若存在则启用以下图标形式(+)
    if(ElementNode.isChildNode)
    {
    str +="<span class='iconSpan' id='iconSpan"+ElementNode.index+"'";
    str +="onmouseover='TreeViewOnMouseOver(this)'";
    str +=" onmouseout='TreeViewOnMouseOut(this)'";
             str +=" onclick='window.Tree.EveArgsOnClick("+ElementNode.index+",this)'";
    str +="><img src='"+this.icon.close+"'>";
    str +="<img src='"+this.icon.closeicon+"'></span>";
    }
    //若不存在则启用以下图标形式(-)
    else
    {
    str +="<span class='iconSpan' id='iconSpan"+ElementNode.index+"'";
    str +="><img src='"+this.icon.open+"'>";
    str +="<img src='"+this.icon.page+"'></span>";
    }

    //为此结点加上名称

   
    str +="<span class='nameSpan'";
    str +=" onmouseover='TreeViewOnMouseOver(this)'";
    str +=" onmouseout='TreeViewOnMouseOut(this)'";
    str +=" onclick='window.Tree.EveArgsOnClick("+ElementNode.index+",this)'";
    str +="'>"+ElementNode.name+"</span>";
   
   
    //在存在子结点情况下缩进并递归调用此方法
    if(ElementNode.isChildNode)
    {

    str +="<div class='divChild' id='divChild"+ElementNode.index+"'";

     
   //子结点集合
   this.NodeStatus(ElementNode.index);
   
    str +="style='display:"+(ElementNode.isOpen?"block":"none")+"'>";
   // 递归调用
     str +=this.addChildNode(ElementNode);

    str +="</div>";
    }

   str+="</div>";
   }
  
 }
 //返回字符串
 return str;
}
//为树扩展是结点属性设置
TreeView.prototype.SetNodeAttribute=function(node)
{
 for(var i=0;i<this.nodes.length;i++)
 
    if(this.nodes[i].pid==node.id)
  {
  node.isChildNode=true; 
   return;
  }
 node.isChildNode=false;
 return ;
}
//配置 Target属性
TreeView.prototype.Target=function(windowName,node)
{
   window.parent.document.getElementById(windowName).src=node.url;
  
}
//为树扩展单击事件
TreeView.prototype.EveArgsOnClick=function(index,obj)
{
  //从传入的索引中读取对应的结点对象
 var  node=this.nodes[index];

 if(obj.className=="iconSpan")
 {
  //判定此结点是否打开状态
    if(node.isOpen)
    {
   //关闭结点
   document.getElementById("divChild"+index).style.display="none";
   document.getElementById("iconSpan"+index).firstChild.src=this.icon.close;
   document.getElementById("iconSpan"+index).childNodes[1].src=this.icon.closeicon;

   node.isOpen=false;
    }else
    { 
   //展开结点
   document.getElementById("divChild"+index).style.display="block";
   document.getElementById("iconSpan"+index).firstChild.src=this.icon.open;
   document.getElementById("iconSpan"+index).childNodes[1].src=this.icon.openicon;
   node.isOpen=true;
    }
   }else
   {
   if(node.target&&node.url)
   //调用Target属性指针对框架
      this.Target(node.target,node);
   else if(node.url)
   location.href=node.url;
   else
      alert("部门名："+node.name+"---主键："+node.id+"---url："+node.url+"---target:"+node.target);

   }
}
//配置结点状态
TreeView.prototype.NodeStatus=function(index)
{
 this.divChilds.push(index);
}
//展开所有结点方法
TreeView.prototype.AllNodeOpen=function()
{
 //遍历所有具有子结点的集合
 for(var i=0;i<this.divChilds.length;i++)
 {
  //索引出有子结点的对象
  var node=this.nodes[this.divChilds[i]];
  //显示其所有子结点 
  document.getElementById("divChild"+this.divChilds[i]).style.display="block";
 
  document.getElementById("iconSpan"+this.divChilds[i]).firstChild.src=this.icon.open;
  document.getElementById("iconSpan"+this.divChilds[i]).childNodes[1].src=this.icon.openicon;
  //设置其结点打开状态为真
  node.isOpen=true;
 }
}
//关闭所有结点
TreeView.prototype.AllNodeClose=function()
{  
    //遍历所有具有子结点的集合
 for(var i=0;i<this.divChilds.length;i++)
 {
   //索引出有子结点的对象
  var node=this.nodes[this.divChilds[i]];
     //显示其所有子结点 
  document.getElementById("divChild"+this.divChilds[i]).style.display="none";
  //改变其图标状态
  document.getElementById("iconSpan"+this.divChilds[i]).firstChild.src=this.icon.close;
  document.getElementById("iconSpan"+this.divChilds[i]).childNodes[1].src=this.icon.closeicon;
    //设置其结点打开状态为真
     node.isOpen=false;
 }
}

 

CSS 样式表
 .iconSpan img
 {
    position:relative;
    top:3px;
 }

 .nameSpan
 {
  color:blue;
  font-size:15px;
  margin-left:8px;
 }
 .divChild
 {
   margin-left:20px;
 }