高手请指教，我要用javascript动态生成树型结构，怎么实现呢？？？？？

刚刚自己写了一个，没有层次限制的树，给你看看有什么建议尽管提，不过你最好找几个图片代替我的图片谢谢
<HTML>
<HEAD>
<TITLE> xg_delayth's Tree </TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language=javascript>
//***********************************************************************************************************************
//--- Function: the define of tree's node object 
//--- Return:
//--- Parameters:
//---   ANodeID: the nodeID of the treeNode
//---   ANodeInnerHtml: view in the node_div
//---   ANodeParentID: the nodeID of the parentNode,if it is the root node the ANodeParentID is "-1"
//---   ANodeDivID: the id of the node_div
//--- Create time:      2002-08-12       Change time:      2002-08-12
//--- Create Programer: xg_delayth       Change Programer: xg_delayth 
  function xg_TreeNode(ANodeID,ANodeInnerHtml,ANodeParentID,ANodeDivID){
    this.nodeID=ANodeID;
    this.nodeInnerHtml=ANodeInnerHtml;
this.nodeParentID=ANodeParentID;
this.nodeDivID=ANodeDivID;
//-- if 0 not view the children else if 1 view the children
this.nodeIsView=0;
  }
//***********************************************************************************************************************
//--- Function: the define of xg_Tree
//--- Return:
//--- Parameters:
//--- Create time:      2002-08-12       Change time:      2002-08-12
//--- Create Programer: xg_delayth       Change Programer: xg_delayth 
  function xg_Tree(){
    //-- store the information about the tree
    this.xg_TreeArray=new Array();
//-- create the root node
this.xg_TreeArray[0]=new xg_TreeNode(0,"根节点",-1,"xgDiv0");
//-- store the tree_node number
this.xg_ArrayCount=1; this.xg_TreeInsert=xg_TreeInsert;
this.xg_TreeSearch=xg_TreeSearch;
this.xg_TreeDelete=xg_TreeDelete;
this.xg_GetNodeCount=xg_GetNodeCount;
  }
//***********************************************************************************************************************
//--- Function: insert a node into the tree
//--- Return:
//--- Parameters:
//---   ATreeNode: the new node to insert into the tree
//--- Create time:      2002-08-12       Change time:      2002-08-12
//--- Create Programer: xg_delayth       Change Programer: xg_delayth 
  function xg_TreeInsert(ATreeNode){
    with(this){
  //-- if ATreeNode is null or it's parentid is null or it's id had been in tree return -1;
      if (!ATreeNode || ""==xg_TreeSearch(this,ATreeNode.nodeParentID) || ""!=xg_TreeSearch(this,ATreeNode.nodeID)){
       return -1;
      } 
  xg_TreeArray[xg_ArrayCount]=ATreeNode;
      xg_ArrayCount++;
}
  }
//***********************************************************************************************************************
//--- Function: search the node by the nodeID inputed
//--- Return:
//--- Parameters:
//---   AXGTree: the object of xg_Tree insert
//---   ANodeID: the nodeID about the searching node
//--- Create time:      2002-08-12       Change time:      2002-08-12
//--- Create Programer: xg_delayth       Change Programer: xg_delayth 
  function xg_TreeSearch(AXGTree,ANodeID){
    with(AXGTree){
     for (var i=0;i<xg_TreeArray.length;i++){
    if (xg_TreeArray[i].nodeID==ANodeID){
      return xg_TreeArray[i];
    }
  }
  return "";
}
  }
//***********************************************************************************************************************
//--- Function: Get children's count
//--- Return: the count of the number of children
//--- Parameters:
//---   AXGTree: the object of xg_Tree
//---   ANodeID: the parentnode's nodeID
//--- Create time:      2002-08-12       Change time:      2002-08-12
//--- Create Programer: xg_delayth       Change Programer: xg_delayth 
  function xg_GetNodeCount(AXGTree,ANodeID){
    with(AXGTree){
      var childCount=0;
  for (var i=0;i<xg_ArrayCount;i++){
    if (xg_TreeArray[i].nodeParentID==ANodeID){
  childCount++;
}
  }
  return childCount;
    }
  }
//***********************************************************************************************************************
//--- Function: delete the node of the tree and it's children by recursion 
//--- Return:
//--- Parameters:
//---   AXGTree: the object of xg_Tree
//---   ANodeID: the node to be deleted
//--- Create time:      2002-08-12       Change time:      2002-08-12
//--- Create Programer: xg_delayth       Change Programer: xg_delayth 
  function xg_TreeDelete(AXGTree,ANodeID){
    with(AXGTree){
      while(1==1){     
    if (0==xg_GetNodeCount(AXGTree,ANodeID)){ //-- if no children be found
      for (var i=0;i<xg_TreeArray.length;i++){
    //-- wipe off the delete_node
        if (xg_TreeArray[i].nodeID==ANodeID){
      for (var j=i+1;j<xg_TreeArray.length;j++){
        xg_TreeArray[j-1]=xg_TreeArray[j];
      }
  //-- reduce the length of the array
      xg_TreeArray.pop();
  AXGTree.xg_ArrayCount--;
    }
          }  
  return ;
} else{ //-- if children be found,delete the children by recursion
  for (var i=0;i<xg_ArrayCount;i++){
    if (xg_TreeArray[i].nodeParentID==ANodeID){
  xg_TreeDelete(AXGTree,xg_TreeArray[i].nodeID);
}
  }
}
  }  
} 
  }
//***********************************************************************************************************************
//--- Function: make the show table
//--- Return:
//--- Parameters:
//---   AXGTree: the object of xg_Tree
//--- Create time:      2002-08-12       Change time:      2002-08-12
//--- Create Programer: xg_delayth       Change Programer: xg_delayth 
  function xg_ShowTree(AXGTree){
    var tmpOut="";
tmpOut+="<table align=left>";
tmpOut+="<tr><td>";
tmpOut+=xg_GetChildren(AXGTree,0,0);
tmpOut+="</td></tr>";
tmpOut+="</table>";
return tmpOut;
  }
//***********************************************************************************************************************
//--- Function: make the show div by recursion
//--- Return:
//--- Parameters:
//---   AXGTree: the object of xg_Tree
//---   ANodeID: the root nodeID
//---   ALevel: the level the div
//--- Create time:      2002-08-12       Change time:      2002-08-12
//--- Create Programer: xg_delayth       Change Programer: xg_delayth 
  function xg_GetChildren(AXGTree,ANodeID,ALevel){
    var tmpNode=xg_TreeSearch(AXGTree,ANodeID);
    var tmpOut="";
with(tmpNode){
  tmpOut+="<div id='"+nodeDivID+"' nodeID='"+nodeID+"' style='display:none;'>"; 
  tmpOut+="<br>";
  for (var i=0;i<ALevel;i++){
    tmpOut+="&nbsp;&nbsp;&nbsp;";
  }
      tmpOut+="<img id='img"+tmpNode.nodeID+"' onmouseover='img_onmouseover(this);' onmouseout='img_onmouseout(this);' ";
  if (0==xg_GetNodeCount(AXGTree,ANodeID)){
    tmpOut+="src='OUTOPEN.BMP' ";
  } else{
    tmpOut+="src='OUTPLUS.BMP' ";
  }
  tmpOut+="width='16' height='16' onclick='div_viewOnclick("+nodeID+",this)' style='color:blue;cursor:hand;'>&nbsp;";     tmpOut+=nodeInnerHtml;
  for (var i=0;i<AXGTree.xg_TreeArray.length;i++){
    if (ANodeID==AXGTree.xg_TreeArray[i].nodeParentID){
      tmpOut+=xg_GetChildren(AXGTree,AXGTree.xg_TreeArray[i].nodeID,ALevel+1);
    }
      }
  tmpOut+="</div>";
} 
return tmpOut;
  }  

解决方案 »

  1.   

    //***********************************************************************************************************************
    //--- Function: control the view of the tree
    //--- Return:
    //--- Parameters:
    //---   ANodeID: the node to be clicked
    //---   AImg: the AImg object stand by with the node
    //--- Create time:      2002-08-12       Change time:      2002-08-12
    //--- Create Programer: xg_delayth       Change Programer: xg_delayth 
      function div_viewOnclick(ANodeID,AImg){
        with(xgTree){
      if (0==xg_GetNodeCount(xgTree,ANodeID)) return;   var tmpNode=xg_TreeSearch(xgTree,ANodeID);
      for (var i=0;i<xg_TreeArray.length;i++){
        if (ANodeID==xg_TreeArray[i].nodeParentID){
          if (0==tmpNode.nodeIsView)
        eval(xg_TreeArray[i].nodeDivID+".style.display='inline';");
      else
        eval(xg_TreeArray[i].nodeDivID+".style.display='none';");
    }
          }
      if (0==tmpNode.nodeIsView){
        tmpNode.nodeIsView=1;
    AImg.src='OUTMINUS.BMP';
      } else{
    tmpNode.nodeIsView=0;
    AImg.src='OUTPLUS.BMP';
      }
        }
      }
    //***********************************************************************************************************************
      function img_onmouseover(AImg){
        AImg.style.filter='alpha(opacity=40)';
      }
    //***********************************************************************************************************************
      function img_onmouseout(AImg){
        AImg.style.filter='alpha(opacity=100)';
      }
    //***********************************************************************************************************************
    </script>
    </HEAD>
    <BODY>
    <form name="fmTree" method="post">
    <script language=javascript>
      var xgTree=new xg_Tree();
      for (var i=0;i<10;i++){
        var xgTreeNode=new xg_TreeNode(i+1,"<a href='temp1.html' target='_blank'>"+"接点"+(i+1)+"</a>",0,"xgDiv"+(i+1));
    xgTree.xg_TreeInsert(xgTreeNode);
      }  xgTreeNode=new xg_TreeNode(12,"<a href='temp2.html' target='_blank'>"+"接点"+12+"</a>",1,"xgDiv"+12);
      xgTree.xg_TreeInsert(xgTreeNode);
      xgTreeNode=new xg_TreeNode(13,"<a href='temp2.html' target='_blank'>"+"接点"+13+"</a>",12,"xgDiv"+13);
      xgTree.xg_TreeInsert(xgTreeNode);
      xgTreeNode=new xg_TreeNode(14,"<a href='temp2.html' target='_blank'>"+"接点"+14+"</a>",12,"xgDiv"+14);
      xgTree.xg_TreeInsert(xgTreeNode);
      xgTreeNode=new xg_TreeNode(15,"<a href='temp2.html' target='_blank'>"+"接点"+15+"</a>",4,"xgDiv"+15);
      xgTree.xg_TreeInsert(xgTreeNode);
      xgTreeNode=new xg_TreeNode(16,"<a href='temp2.html' target='_blank'>"+"接点"+16+"</a>",4,"xgDiv"+16);
      xgTree.xg_TreeInsert(xgTreeNode);  
      xgTreeNode=new xg_TreeNode(17,"<a href='temp2.html' target='_blank'>"+"接点"+17+"</a>",12,"xgDiv"+17);
      xgTree.xg_TreeInsert(xgTreeNode);  
      xgTreeNode=new xg_TreeNode(18,"<a href='temp2.html' target='_blank'>"+"接点"+18+"</a>",17,"xgDiv"+18);
      xgTree.xg_TreeInsert(xgTreeNode);  
      xgTreeNode=new xg_TreeNode(19,"<a href='temp2.html' target='_blank'>"+"接点"+19+"</a>",17,"xgDiv"+19);
      xgTree.xg_TreeInsert(xgTreeNode);  
      xgTreeNode=new xg_TreeNode(20,"<a href='temp2.html' target='_blank'>"+"接点"+20+"</a>",18,"xgDiv"+20);
      xgTree.xg_TreeInsert(xgTreeNode);  //  xgTree.xg_TreeDelete(xgTree,1); 
    </script>
    <div id=divID></div>
    </form>
    </BODY>
    </HTML>
    <script language=javascript>
      divID.innerHTML=xg_ShowTree(xgTree);
      eval(xgTree.xg_TreeArray[0].nodeDivID+".style.display='inline';");
    </script>
      

  2.   

    当然是动态生成的啊！
    对象xg_Tree存储所有的树的信息，xg_TreeNode对象存储相应的接点信息。
    其中xg_Tree中的xg_TreeArray数组中的xg_TreeArray[0]存储根节点。
    其中我只是给你一个例子罢了，你可以随便组合树中的节点信息
    在xg_TreeNode(ANodeID,ANodeInnerHtml,ANodeParentID,ANodeDivID)
    中ANodeID指唯一号，ANodeInnerHtml是指每个显示节点中的html代码，
    ANodeParentID指父节点的ID号，ANodeDivID指节点显示曾的ID值。
    不清楚你的动态是什么意思。
      

  3.   

    开始你可以点击根节点前面的图片，其中接点一也可以点,可能没有图片看起来不清楚，其中要有三个图片他们是OUTMINUS.BMP，OUTOPEN.BMP，OUTPLUS.BMP你就会看的比较清楚了。
      

  4.   

    我的动态指的是，往数据库中增加一条记录时，结点自动增加一，并且在相应的父结点下显示出来，并不是事先设好的链接。
    谢谢你的回复，请多指教我对javascript不熟悉
      

  5.   

    to sandsworlf(安):javascript不能和数据库直接打交道，如果要把数据库中的记录直接反映到显示的树中你必须要有一张节点表包含相应的节点信息。然后用jsp或asp等服务器脚本语言把相应的信息放到html中，你可以写一个相应的方法和我的程序相连。
    to Fengxiubing2000(FXB):可以改，不过你要把其中的方法xg_GetChildren改一下还有把相应节点对象xg_TreeNode中的nodeIsView改为1，看一下注解吧！
    你可以展开任意层次的东西。
      

  6.   

    我是要用jsp 和javascript做树型结构，但是我不知道怎么联合起来用，你能告诉我吗？还有我不知道怎么给分，我今天才知道这个网站的，从这里我学了很多知识，谢谢你了。
      

  7.   

    老兄，你的问题好大，这涉及到数据库、jsp和javascript三个方面的东西。一般你先取得相应的数据库表的结果集得到一个ResultSet类的实例然后用类似下面的做法在jsp文件中
    <%
      out.print("var xgTree=new xg_Tree();")
      ResultSet rs=(取得结果集);
      while (null!=rs && rs.next()){
        out.print("xgTreeNode=new xg_TreeNode(从数据库中得到的相应信可以用rs.getString("字段名")要自己组织一下);");
        out.print("xgTree.xg_TreeInsert(xgTreeNode);");
      }
    %>
    用上面的代码替换最后一个<script language=javascript>和</script>之间的东西，不过我认为以你现在的情况要完全理解有些问题。
    我觉得你要的其实是对数据库的设计而不是动态的javascript脚本代码，你需要定义一种自己的树的相应的数据库结构如（Oracle语法）
    create table xg_Tree(
      RecordID number(9) not null primary key,    --唯一号
      ParentID number(9),                         --指向父节点RecordID
      RecordValue varchar2(100)                   --本节点的信息 
    )
    然后再编写相应的对这种结构的操作的函数，然后才能考虑和javascript的相连
      

  8.   

    to:xg_delayth:我加了个函数
      function xg_ShowTree2(AXGTree,ANodeID,vLevel){
        var tmpOut="";
    tmpOut+="<table align=left>";
    tmpOut+="<tr><td>";
    tmpOut+=xg_GetChildren(AXGTree,ANodeID,vLevel);
    tmpOut+="</td></tr>";
    tmpOut+="</table>";
    return tmpOut;
    }
    然后,
      var sOpen;
      var xgTree=new xg_Tree();
      for (var i=0;i<10;i++){
        var xgTreeNode=new xg_TreeNode(i+1,"<a href='temp1.html' target='_blank'>"+"接点"+(i+1)+"</a>",0,"xgDiv"+(i+1));
    xgTree.xg_TreeInsert(xgTreeNode);
    xgTreeNode.nodeIsView=1;
    sOpen+=xg_ShowTree2(xgTree,i+1,i+1);
      }
      divID.innerHTML=sOpen;
      eval(xgTree.xg_TreeArray[0].nodeDivID+".style.display='inline';");
    结果报错,请问错在哪,要怎样改才能展开指定的层次?
      

  9.   

    to:xg_delayth(铁鹰)
    你好，我把结果集查出来了，但是树型结构没有显示出来
    我知识在你的程序里加上我的数据库连接和查询，别的没有变
    我加入程序如下：
    <<body bgcolor="#E8F4FF"><%
       Class.forName("oracle.jdbc.driver.OracleDriver");
       String sConnStr="jdbc:oracle:thin:@billing:1521:myoracle";
       Connection conn=DriverManager.getConnection(sConnStr,"newjqt","newjqt");
       Statement stmt=conn.createStatement();   
       ResultSet rs;   rs=stmt.executeQuery("select * from xg_tree");   while(rs.next())
      { String id=rs.getString("id");
        String parentid=rs.getString("parentid");
    String recordvalue=rs.getString("recordvalue");
    out.println(id);
    out.println(parentid);
    out.println(recordvalue);
       }%>结果集显示了，但是别的都没有显示
    对了，你说
    <%
      out.print("var xgTree=new xg_Tree();")
      ResultSet rs=(取得结果集);
      while (null!=rs && rs.next()){
        out.print("xgTreeNode=new xg_TreeNode(从数据库中得到的相应信可以用rs.getString("字段名")要自己组织一下);");
        out.print("xgTree.xg_TreeInsert(xgTreeNode);");
      }
    %>
    用上面的代码替换最后一个<script language=javascript>和</script>之间的东西
    javascript 里面能不能执行数据库的语句？（你的里面包含的有）