用JavaScript生成树结构（五）

用JavaScript生成树结构（五）

</script>
</head>
<body bgColor=#f8f088 style="FONT-FAMILY:宋体;FONT-SIZE:14px">
<script>

</script>
</body>
</html>
在程序中，InitTree函数是初始化树结构的。其实，使用这种方法来初始树有不灵活的方面，一般我们是使用ASP或PHP等服务器端的脚本语言来做初始的工作，而仅仅把响应操作的函数使用客户端执行的脚本中。
并且，节点的信息也被储存在一个数据表中，比如ACCESS中。
定义表的结构如下：
字段类型长度含义
Name 文本 50 节点名
Parent 文本 50 父节点
ImgClSm 文本 50 图片1
ImgClBg 文本 50 图片2
ImgOpSm 文本 50 图片3
Link 文本 50 功能链接
Target 文本 20 链接目标
Display 是/否子树显示
其中只有一个节点为根节点，其Parent为Null。下面是在ASP中的InitTree函数：
<%@language=javascript%>
function InitTree()
{
var node,i;
<%
var conn=Server.CreateObject("ADODB.Connection"); //建立一个数据连接对象
conn.Open("mydsn");  //打开连接
SQL="Select * from node";  //数据查询语句
var rs=conn.Execute(SQL);
while(!rs.eof)  //将每个节点数据取出
{
  %>
  node=new NODE("<%=rs("Name")%>");
  node.parent="<%=rs("Parent")%>";
  node.imgopsm="<%=rs("ImgOpSm")%>";
  node.imgclbg="<%=rs("ImgClBg")%>";
  node.imgclsm="<%=rs("ImgClSm")%>";
  node.link="<%=rs("Link")%>";
  node.target="<%=rs("Target")%>";
  <%
  if(rs("Display")=="Y"){%>node.display=true;
  <%}else{%>node.display=false;
  <%}
  rs.MoveNext();
}
rs.Close();
conn.Close();
%>
for(i=0;i<na.total;i++)
  if(na[i].parent=="Null")break;
root=na[i];
AddNode(root);
curfocus=root;
}
function AddNode(node) //增加节点到父节点中
{
var i;
for(i=0;i<na.total;i++)
  if(na[i].parent==node.name)node.child.Add(na[i]);
for(i=0;i<node.child.total;i++)
  AddNode(node.child[i]);
}
其它的函数同上，从结果可以看出，效果一样，而且我们可以通过改变数据表的内容，使得树的结构改变。
程序中打开的mydsn是一个ODBC数据源，是ASP与数据库连接的通道。可以在控制面板的ODBC数据源（32位）中设置。
以上程序在Win98/PWS/IE5.5中通过。