动态载入树 (ASP+数据库)
ASP+ACCESS 在数据量达100万条记录下，载入速度仍然惊人....
// 网上转载. 忘了作者... : )
//********************** Index.asp ************************//
1<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%>
2<%Option Explicit%>
3<html>
4<head>
5<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
6<title>tree</title>
7<link href="css/style.css" rel="stylesheet" type="text/css">
8<script language="JavaScript">
9<!--
10var d1,d2;
11
12function expand(id)
13{
14 var d=new Date();
15 d1=d.valueOf();
16
17 var s_id = eval("s" + id);
18 var dir_id = eval("dir" + id);
19 if(s_id.href != @#@#)
20 {
21 //window.open(s_id.href);
22 //or
23 //top.frames[@#FrameName@#].location.href = s_id.href;
24 }
25
26 switch(dir_id.open)
27 {
28 //改变"+","-"
29 case "true":
30 {
31 with(dir_id)
32 {
33 innerText = "+";
34 open = "false";
35 className = @#dirclose@#;
36 }
37 if(document.getElementById("t" + id))
38 {
39 eval("t"+id).style.display = @#none@#;
40 document.getElementById("load_" + id).style.display = @#none@#;
41 return;
42 }
43 else
44 {
45 document.getElementById("load_" + id).style.display = @#none@#;
46 }
47 break;
48 }
49 case "false":
50 {
51 with(dir_id)
52 {
53 innerText = "-";
54 open = "true";
55 className = @#diropen@#;
56 }
57
58 document.getElementById("load_" + id).style.display = @#@#;
59
60 if(document.getElementById("t" + id))
61 {
62 eval("t" + id).style.display = @#@#;
63 eval("load_" + id).style.display = @#none@#;
64 return;
65 }
66 else
67 {
68 document.frames[@#hifm@#].location.replace("subtree.asp?id=" + id);
69 }
70 break;
71 }
72 default:dir_id.innerText = "."; dir_id.className = @#dirNode@#; return;
73 }
74
75}
76
77function ArrToHtml(ArrNode,nodeid)
78{
79 //输出到页面
80 var node_html = @#<table id="t@# + nodeid + @#" width="100%" border="0" style="position: relative; left: 18px;" cellspacing="0" cellpadding="0">@#;
81
82 var str,opened,cls
83 for (var i = 0; i < ArrNode.length; i++)
84 {
85 if (ArrNode[i].iChildren == 0)
86 {
87 str = @#.@#;
88 opened = @#no@#;
89 cls = @#dirNode@#;
90 }
91 else
92 {
93 str = @#+@#;
94 opened = @#false@#;
95 cls = @#dirclose@#;
96 }
97
98 node_html += @#<tr><td id="node@# + ArrNode[i].id + @#" class="td_node" valign="top"><span class="@# + cls + @#" id="dir@# + ArrNode[i].id + @#" onclick="expand(@# + ArrNode[i].id + @#)" open="@# + opened + @#">@# + str + @#</span><span class="node" id="s@# + ArrNode[i].id + @#" onclick="expand(@# + ArrNode[i].id + @#)" title="@# + ArrNode[i].Content + @#" href="@# + ArrNode[i].strLink + @#">@# + ArrNode[i].Content + @#</span></td></tr>@#;
99
100 if (ArrNode[i].iChildren > 0)
101 {
102 node_html += @#<tr id="load_@# + ArrNode[i].id + @#" style="display: none"><td class="td_node"><table border="0" cellspacing="0" cellpadding="0" style="position: relative; left: 18; top: 0px"><tr><td class="td_node"><span class="dirNode">.</span><span class="load">Loading</span></td></tr></table></td></tr>@#;
103 }
104 }
105
106 node_html += @#</table>@#;
107 if (document.getElementById("load_" + nodeid))
108 {
109 document.getElementById("load_" + nodeid).style.display = "none";
110 document.getElementById("node" + nodeid).innerHTML += node_html;
111 var d=new Date();
112 d2=d.valueOf();
113 message.innerHTML = "耗时："+(d2-d1)+"ms";
114 }
115}
116-->
117</script>
118</head>
119
120<body topmargin="0" leftmargin="0" scroll="yes">
121<%
122Dim conn,rs
123Dim s,open,cls
124On Error Resume Next
125Set conn = Server.CreateObject("ADODB.Connection")
126conn.Open "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & Server.mappath("Tree.mdb") & ";Persist Security Info=False"
127Set rs = Server.CreateObject("ADODB.Recordset")
128
129rs.Open "select *,(select count(*) from deeptree where parentid = T.id) as children from deeptree T where parentid=0 order by parentid",conn,1,3
130%>
131<div id="message" style="height: 20px" align="center"> </div>
132<div align="center">
133 <center>
134 <table border="0" width="100%" cellspacing="0" cellpadding="0" height="100%" bgcolor="#F2F2F2">
135 <tr>
136 <td width="260" valign="top" align="left">
137 <div id="treedir" style="overflow: auto; width: 30%; height: 100%;">
138 <table border="0" cellspacing="0" cellpadding="0" style="position: relative; left: 18px; top: 20px;" width="100%">
139 <%
140 Do While Not rs.EOF
141 If rs("children") = 0 Then
142 s = "."
143 open = "no"
144 cls = "dirNode"
145 Else
146 s = "+"
147 open = "false"
148 cls = "dirclose"
149 End If
150 %>
151 <tr>
152 <td id="node<% = rs("id")%>" class="td_node" valign="top"><span class="<% = cls %>" id="dir<% = rs("id") %>" onclick="expand(<%=rs("id")%>)" open="<% = open %>"><% = s %></span><span class="node" id="s<% = rs("id") %>" onclick="expand(<% = rs("id") %>)" title="<% = Trim(rs("content")) %>" href="<% = Trim(rs("link")) %>"><% = rs("content") %></span>
153 </td>
154 </tr>
155 <% If rs("children") > 0 Then%>
156 <tr id="load_<% = rs("id") %>" style="display: none">
157 <td class="td_node">
158 <table border="0" cellspacing="0" cellpadding="0" style="position:relative;left:18;top:0" width="100%">
159 <tr>
160 <td class="td_node"><span class="dirNode">.</span><span class="load">Loading</span>
161 </td>
162 </tr>
163 </table>
164 </td>
165 </tr>
166 <%End If%>
167 <%
168 rs.MoveNext
169 Loop
170 %>
171 </table>
172 </div>
173 </td>
174 </table>
175 </center>
176</div>
177<%
178Set rs = Nothing
179Set conn = Nothing
180%>
181<iframe id=@#hifm@# width=0 height=0 style="display: none" height="100%" width="100%"></iframe>
182</body>
183</html>
2<%Option Explicit%>
3<html>
4<head>
5<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
6<title>tree</title>
7<link href="css/style.css" rel="stylesheet" type="text/css">
8<script language="JavaScript">
9<!--
10var d1,d2;
11
12function expand(id)
13{
14 var d=new Date();
15 d1=d.valueOf();
16
17 var s_id = eval("s" + id);
18 var dir_id = eval("dir" + id);
19 if(s_id.href != @#@#)
20 {
21 //window.open(s_id.href);
22 //or
23 //top.frames[@#FrameName@#].location.href = s_id.href;
24 }
25
26 switch(dir_id.open)
27 {
28 //改变"+","-"
29 case "true":
30 {
31 with(dir_id)
32 {
33 innerText = "+";
34 open = "false";
35 className = @#dirclose@#;
36 }
37 if(document.getElementById("t" + id))
38 {
39 eval("t"+id).style.display = @#none@#;
40 document.getElementById("load_" + id).style.display = @#none@#;
41 return;
42 }
43 else
44 {
45 document.getElementById("load_" + id).style.display = @#none@#;
46 }
47 break;
48 }
49 case "false":
50 {
51 with(dir_id)
52 {
53 innerText = "-";
54 open = "true";
55 className = @#diropen@#;
56 }
57
58 document.getElementById("load_" + id).style.display = @#@#;
59
60 if(document.getElementById("t" + id))
61 {
62 eval("t" + id).style.display = @#@#;
63 eval("load_" + id).style.display = @#none@#;
64 return;
65 }
66 else
67 {
68 document.frames[@#hifm@#].location.replace("subtree.asp?id=" + id);
69 }
70 break;
71 }
72 default:dir_id.innerText = "."; dir_id.className = @#dirNode@#; return;
73 }
74
75}
76
77function ArrToHtml(ArrNode,nodeid)
78{
79 //输出到页面
80 var node_html = @#<table id="t@# + nodeid + @#" width="100%" border="0" style="position: relative; left: 18px;" cellspacing="0" cellpadding="0">@#;
81
82 var str,opened,cls
83 for (var i = 0; i < ArrNode.length; i++)
84 {
85 if (ArrNode[i].iChildren == 0)
86 {
87 str = @#.@#;
88 opened = @#no@#;
89 cls = @#dirNode@#;
90 }
91 else
92 {
93 str = @#+@#;
94 opened = @#false@#;
95 cls = @#dirclose@#;
96 }
97
98 node_html += @#<tr><td id="node@# + ArrNode[i].id + @#" class="td_node" valign="top"><span class="@# + cls + @#" id="dir@# + ArrNode[i].id + @#" onclick="expand(@# + ArrNode[i].id + @#)" open="@# + opened + @#">@# + str + @#</span><span class="node" id="s@# + ArrNode[i].id + @#" onclick="expand(@# + ArrNode[i].id + @#)" title="@# + ArrNode[i].Content + @#" href="@# + ArrNode[i].strLink + @#">@# + ArrNode[i].Content + @#</span></td></tr>@#;
99
100 if (ArrNode[i].iChildren > 0)
101 {
102 node_html += @#<tr id="load_@# + ArrNode[i].id + @#" style="display: none"><td class="td_node"><table border="0" cellspacing="0" cellpadding="0" style="position: relative; left: 18; top: 0px"><tr><td class="td_node"><span class="dirNode">.</span><span class="load">Loading</span></td></tr></table></td></tr>@#;
103 }
104 }
105
106 node_html += @#</table>@#;
107 if (document.getElementById("load_" + nodeid))
108 {
109 document.getElementById("load_" + nodeid).style.display = "none";
110 document.getElementById("node" + nodeid).innerHTML += node_html;
111 var d=new Date();
112 d2=d.valueOf();
113 message.innerHTML = "耗时："+(d2-d1)+"ms";
114 }
115}
116-->
117</script>
118</head>
119
120<body topmargin="0" leftmargin="0" scroll="yes">
121<%
122Dim conn,rs
123Dim s,open,cls
124On Error Resume Next
125Set conn = Server.CreateObject("ADODB.Connection")
126conn.Open "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & Server.mappath("Tree.mdb") & ";Persist Security Info=False"
127Set rs = Server.CreateObject("ADODB.Recordset")
128
129rs.Open "select *,(select count(*) from deeptree where parentid = T.id) as children from deeptree T where parentid=0 order by parentid",conn,1,3
130%>
131<div id="message" style="height: 20px" align="center"> </div>
132<div align="center">
133 <center>
134 <table border="0" width="100%" cellspacing="0" cellpadding="0" height="100%" bgcolor="#F2F2F2">
135 <tr>
136 <td width="260" valign="top" align="left">
137 <div id="treedir" style="overflow: auto; width: 30%; height: 100%;">
138 <table border="0" cellspacing="0" cellpadding="0" style="position: relative; left: 18px; top: 20px;" width="100%">
139 <%
140 Do While Not rs.EOF
141 If rs("children") = 0 Then
142 s = "."
143 open = "no"
144 cls = "dirNode"
145 Else
146 s = "+"
147 open = "false"
148 cls = "dirclose"
149 End If
150 %>
151 <tr>
152 <td id="node<% = rs("id")%>" class="td_node" valign="top"><span class="<% = cls %>" id="dir<% = rs("id") %>" onclick="expand(<%=rs("id")%>)" open="<% = open %>"><% = s %></span><span class="node" id="s<% = rs("id") %>" onclick="expand(<% = rs("id") %>)" title="<% = Trim(rs("content")) %>" href="<% = Trim(rs("link")) %>"><% = rs("content") %></span>
153 </td>
154 </tr>
155 <% If rs("children") > 0 Then%>
156 <tr id="load_<% = rs("id") %>" style="display: none">
157 <td class="td_node">
158 <table border="0" cellspacing="0" cellpadding="0" style="position:relative;left:18;top:0" width="100%">
159 <tr>
160 <td class="td_node"><span class="dirNode">.</span><span class="load">Loading</span>
161 </td>
162 </tr>
163 </table>
164 </td>
165 </tr>
166 <%End If%>
167 <%
168 rs.MoveNext
169 Loop
170 %>
171 </table>
172 </div>
173 </td>
174 </table>
175 </center>
176</div>
177<%
178Set rs = Nothing
179Set conn = Nothing
180%>
181<iframe id=@#hifm@# width=0 height=0 style="display: none" height="100%" width="100%"></iframe>
182</body>
183</html>
///****************** SubTree.asp *********************//
1<%Option Explicit%>
2<script language="JavaScript">
3function NodeClass(id,Content,strLink,iChildren)
4{
5 //this.id=parseInt(id);
6 this.id=id;
7 this.Content=Content;
8 this.strLink=strLink;
9 this.iChildren=iChildren;
10 //this.iChildren=parseInt(iChildren);
11}
12
13var ArrNode = new Array();
14<%
15Dim conn,rs,s,cls,href,Open
16Dim nodeid,i
17nodeid = Request.QueryString("id")
18@#On Error Resume Next
19Set conn = Server.CreateObject("ADODB.Connection")
20conn.Open "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & Server.mappath("tree.mdb") & ";Persist Security Info=False"
21Set rs = Server.CreateObject("ADODB.Recordset")
22rs.Open "select *,(select count(*) from deeptree where parentid = T.id) as children from deeptree T where parentid=" & nodeid & "",conn,1,3
23i=0
24Do While Not rs.EOF
25 %>
26 ArrNode[<%=i%>] = new NodeClass(<%=rs("id")%>,@#<%=trim(rs("content"))%>@#,@#<%=trim(rs("link"))%>@#,<%=rs("children")%>);
27 <%
28
29 i=i+1
30 rs.MoveNext
31Loop
32
33Set rs = Nothing
34%>
35parent.ArrToHtml(ArrNode,@#<% = nodeid %>@#);
36-->
37</script>
38<%
39Set conn = Nothing
40%>
2<script language="JavaScript">
3function NodeClass(id,Content,strLink,iChildren)
4{
5 //this.id=parseInt(id);
6 this.id=id;
7 this.Content=Content;
8 this.strLink=strLink;
9 this.iChildren=iChildren;
10 //this.iChildren=parseInt(iChildren);
11}
12
13var ArrNode = new Array();
14<%
15Dim conn,rs,s,cls,href,Open
16Dim nodeid,i
17nodeid = Request.QueryString("id")
18@#On Error Resume Next
19Set conn = Server.CreateObject("ADODB.Connection")
20conn.Open "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & Server.mappath("tree.mdb") & ";Persist Security Info=False"
21Set rs = Server.CreateObject("ADODB.Recordset")
22rs.Open "select *,(select count(*) from deeptree where parentid = T.id) as children from deeptree T where parentid=" & nodeid & "",conn,1,3
23i=0
24Do While Not rs.EOF
25 %>
26 ArrNode[<%=i%>] = new NodeClass(<%=rs("id")%>,@#<%=trim(rs("content"))%>@#,@#<%=trim(rs("link"))%>@#,<%=rs("children")%>);
27 <%
28
29 i=i+1
30 rs.MoveNext
31Loop
32
33Set rs = Nothing
34%>
35parent.ArrToHtml(ArrNode,@#<% = nodeid %>@#);
36-->
37</script>
38<%
39Set conn = Nothing
40%>
//********************* Node.htc *********************//
1<PUBLIC:COMPONENT>
2<PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="fos()"/>
3<PUBLIC:ATTACH EVENT="onmouseout" ONEVENT="blu()"/>
4<PUBLIC:ATTACH EVENT="onselectstart" ONEVENT="st()"/>
5<SCRIPT>
6function fos(){}{
7if(style.backgroundColor!=@##ffffff@#){
8style.color="#000000"
9style.border="1 solid #888888"
10style.backgroundColor=@##DDDDDD@#
11}
12else
13{}{style.color="#000000"
14style.border="1 solid #999999"
15style.backgroundColor=@##ffffff@#
16}
17}
18
19function blu(){}{
20if(style.backgroundColor!=@##ffffff@#){
21style.color="#000000"
22style.border="1 solid #f2f2f2"
23style.backgroundColor=@##f2f2f2@#
24}
25else
26{}{style.color="#000000"
27style.border="1 solid #999999"
28style.backgroundColor=@##ffffff@#
29}
30}
31
32function st(){}{
33return false;
34}
35</SCRIPT>
36</PUBLIC:COMPONENT>
2<PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="fos()"/>
3<PUBLIC:ATTACH EVENT="onmouseout" ONEVENT="blu()"/>
4<PUBLIC:ATTACH EVENT="onselectstart" ONEVENT="st()"/>
5<SCRIPT>
6function fos(){}{
7if(style.backgroundColor!=@##ffffff@#){
8style.color="#000000"
9style.border="1 solid #888888"
10style.backgroundColor=@##DDDDDD@#
11}
12else
13{}{style.color="#000000"
14style.border="1 solid #999999"
15style.backgroundColor=@##ffffff@#
16}
17}
18
19function blu(){}{
20if(style.backgroundColor!=@##ffffff@#){
21style.color="#000000"
22style.border="1 solid #f2f2f2"
23style.backgroundColor=@##f2f2f2@#
24}
25else
26{}{style.color="#000000"
27style.border="1 solid #999999"
28style.backgroundColor=@##ffffff@#
29}
30}
31
32function st(){}{
33return false;
34}
35</SCRIPT>
36</PUBLIC:COMPONENT>
//*************************** Style.css ****************//
1body{}{font-size:12px}
2#txt{}{font-size: 12px; color: #000000; font-family: Courier New;border:1 solid #3366cc}
3#hrf{}{font-size: 12px; color: #000000; font-family: Courier New;border:1 solid #3366cc}
4#sb{}{font-size: 12px; color: #000000; font-family: Courier New;background-color:#d2e8ff;border:1 solid #3366cc;cursor:hand}
5.node{}{position:relative;left:2;height:20;padding:3 3 1 3;font-size:12px;font-family: Courier New;cursor:hand;border:1 solid #f2f2f2;behavior:url(css/node.htc)}
6.load{}{position:relative;left:2;height:20;padding:1 3 1 3;font-size:12px;font-family: Courier New;cursor:hand;border:1 solid #999999;background-color:#f2f2f2;color:#999999}
7.td_node{}{height:22px}
8#treedir{}{
9}
10span.diropen
11{}{ padding-left:2px;
12 overflow:hidden;
13 line-height:3px;
14 font-size:12px;
15 padding-top:5px;
16 width:11px;
17 height:11px;
18 border:solid 1px black;
19 background-color:#ffffff;
20 cursor:hand;
21}
22span.dirclose
23{}{
24 line-height:6px;
25 font-size:9px;
26 overflow:hidden;
27 padding:2px;
28 width:11px;
29 height:11px;
30 border:solid 1px black;
31 background-color:#ffffff;
32 cursor:hand;
33}
34.dirNode
35{}{
36 font-weight:bold
37 overflow:visible;
38 font-size:9px;
39 line-height:3px;
40 padding: 1px 1px 0px 3px;
41 width:11px;
42 height:11px;
43 border:solid 1px black;
44 background-color:#ffffff;
45 cursor:hand;
46}
2#txt{}{font-size: 12px; color: #000000; font-family: Courier New;border:1 solid #3366cc}
3#hrf{}{font-size: 12px; color: #000000; font-family: Courier New;border:1 solid #3366cc}
4#sb{}{font-size: 12px; color: #000000; font-family: Courier New;background-color:#d2e8ff;border:1 solid #3366cc;cursor:hand}
5.node{}{position:relative;left:2;height:20;padding:3 3 1 3;font-size:12px;font-family: Courier New;cursor:hand;border:1 solid #f2f2f2;behavior:url(css/node.htc)}
6.load{}{position:relative;left:2;height:20;padding:1 3 1 3;font-size:12px;font-family: Courier New;cursor:hand;border:1 solid #999999;background-color:#f2f2f2;color:#999999}
7.td_node{}{height:22px}
8#treedir{}{
9}
10span.diropen
11{}{ padding-left:2px;
12 overflow:hidden;
13 line-height:3px;
14 font-size:12px;
15 padding-top:5px;
16 width:11px;
17 height:11px;
18 border:solid 1px black;
19 background-color:#ffffff;
20 cursor:hand;
21}
22span.dirclose
23{}{
24 line-height:6px;
25 font-size:9px;
26 overflow:hidden;
27 padding:2px;
28 width:11px;
29 height:11px;
30 border:solid 1px black;
31 background-color:#ffffff;
32 cursor:hand;
33}
34.dirNode
35{}{
36 font-weight:bold
37 overflow:visible;
38 font-size:9px;
39 line-height:3px;
40 padding: 1px 1px 0px 3px;
41 width:11px;
42 height:11px;
43 border:solid 1px black;
44 background-color:#ffffff;
45 cursor:hand;
46}
// 把 Node.htc, Style.css 保存在 CSS 目录下. Index.asp，SubTree.asp 放与根目录.
另新建一ACCESS数据库 Tree.mdb
表DeepTree 结构为 ID（自动编号）,Content（文本）, ParentID（数字）,Link（文本）
相关文章：
- · 如何显示一个表（ACCESS）
- · 关于DataGrid等控件中的自动编号
- · asp实现sql的备份与恢复
- · 非数据库数据源分页的实现
- · 在ＡＳＰ中用集合成批操作数据库
- · ASP访问SQL Server内置对象
- · ASP数据库简单操作教程
- · 不通过数据源完全控制MDB数据库
- · 在asp 中使用 sql_dmo 添加新数据库
- · 使用 ASP+ DataGrid 控件来创建主视图/详细资料视图 （2）
- · 使用 ASP+ DataGrid 控件来创建主视图/详细资料视图
- · ASP防注入之解决方案--加强版
- · DataList 控件分页操作
- · 动态模板列更新数据分页的例子
- · 改进的SQL防注入
- · DataGrid动态添加模板列的一个例子
- · 从数据库中读取记录的动态列表（无初始值）
- · 轻松解决页面回传后页面滚动到顶端
- · DataGrid和DropDownList的一些配合以及使用css定制DataGrid
- · 实现可动态改变宽度的表格简单方法
- · 利用SQLSERVER存储过程实现ASP用户身份验证
- · 在页面上显示Excel文件中的内容
- · asp常用数据库连接方法和技巧
- · asp常用数据库连接方法和技巧
- · 使用简单的方法进行批量删除数据
- · ASP与ACCESS数据库
- · ORACLE920与ASP的连接问题的解决办法
- · 保存图片到SQL 2000 Server数据库
- · 利用母版页快速标准化站点
- · 让ASP也可以连接MYSQL
- · 有关sql注入
- · 在asp 中使用 sql_dmo 给表添加索引
- · 在asp 中使用 sql_dmo 添加新数据库
- · 对Datagrid添加删除确认的脚本
- · asp常用数据库连接方法和技巧
- · asp常用数据库连接方法和技巧
- · 代码分析－DataGrid实现自增列、单选、多选
- · 解决使用ASP无法连接 ORACLE 9i 数据库的问题