动态载入树 (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;  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%>

//********************* 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>

//***************************  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}

// 把 Node.htc, Style.css 保存在 CSS 目录下. Index.asp，SubTree.asp 放与根目录.
另新建一ACCESS数据库 Tree.mdb
表DeepTree 结构为 ID（自动编号）,Content（文本）, ParentID（数字）,Link（文本）
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/Dicky/p/154062.html