|
用JavaScript生成树结构（五）
</script>
</head>
<body bgColor=#f8f088 style="FONT-FAMILY:宋体;FONT-SIZE:14px">
<script>
<!--
InitTree();
ShowTree();
-->
</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中通过。
(作者：jincoo 来源：奥索)
|