动态载入树 (ASP+数据库)

ASP+ACCESS 在数据量达100万条记录下，载入速度仍然惊人....

// 网上转载. 忘了作者... : )

//********************** Index.asp ************************//

<%@LANGUAGE="VBSCRIPT" CODEPAGE="936"%>
2

<%Option Explicit%>
3

<html>
4

<head>
5

<title>tree</title>
7

<!--
10

var d1,d2;
11

function expand(id)
13

{
14

var d=new Date();
15

d1=d.valueOf();
16

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

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

document.getElementById("load_" + id).style.display = '';
59

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

}
76

function 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

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

node_html += '<tr><td id="node' + ArrNode[i].id + '" class="td_node" valign="top"><span class="' + cls + '" id="dir' + ArrNode[i].id + '" οnclick="expand(' + ArrNode[i].id + ')" open="' + opened + '">' + str + '</span><span class="node" id="s' + ArrNode[i].id + '" οnclick="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

<%
122

Dim conn,rs
123

Dim s,open,cls
124

On Error Resume Next
125

Set conn = Server.CreateObject("ADODB.Connection")
126

conn.Open "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & Server.mappath("Tree.mdb") & ";Persist Security Info=False"
127

Set rs = Server.CreateObject("ADODB.Recordset")
128

129

rs.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

<%
178

Set rs = Nothing
179

Set conn = Nothing
180

%>
181

</body>
183

</html>

///****************** SubTree.asp *********************//

<%Option Explicit%>
2

function 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

var ArrNode = new Array();
14

<%
15

Dim conn,rs,s,cls,href,Open
16

Dim nodeid,i
17

nodeid = Request.QueryString("id")
18

'On Error Resume Next
19

Set conn = Server.CreateObject("ADODB.Connection")
20

conn.Open "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & Server.mappath("tree.mdb") & ";Persist Security Info=False"
21

Set rs = Server.CreateObject("ADODB.Recordset")
22

rs.Open "select *,(select count(*) from deeptree where parentid = T.id) as children from deeptree T where parentid=" & nodeid & "",conn,1,3
23

i=0
24

Do While Not rs.EOF
25

%>
26

ArrNode[<%=i%>] = new NodeClass(<%=rs("id")%>,'<%=trim(rs("content"))%>','<%=trim(rs("link"))%>',<%=rs("children")%>);
27

<%
28

i=i+1
30

rs.MoveNext
31

Loop
32

Set rs = Nothing
34

%>
35

parent.ArrToHtml(ArrNode,'<% = nodeid %>');
36

-->
37

</script>
38

<%
39

Set conn = Nothing
40

//********************* Node.htc *********************//

<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>
6

function fos(){

}{
7

if(style.backgroundColor!='#ffffff'){
8

style.color="#000000"
9

style.border="1 solid #888888"
10

style.backgroundColor='#DDDDDD'
11

}
12

else
13

{

}{style.color="#000000"
14

style.border="1 solid #999999"
15

style.backgroundColor='#ffffff'
16

}
17

}
18

function blu(){

}{
20

if(style.backgroundColor!='#ffffff'){
21

style.color="#000000"
22

style.border="1 solid #f2f2f2"
23

style.backgroundColor='#f2f2f2'
24

}
25

else
26

{

}{style.color="#000000"
27

style.border="1 solid #999999"
28

style.backgroundColor='#ffffff'
29

}
30

}
31

function st(){

}{
33

return false;
34

}
35

</SCRIPT>
36

</PUBLIC:COMPONENT>

//*************************** Style.css ****************//

body{

}{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

}
10

span.diropen
11

{

}{ padding-left:2px;
12

overflow:hidden;
13

line-height:3px;
14

font-size:12px;
15

padding-top:5px;
16