动态载入树 (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 < ! --
 10 var d1,d2;
 11
 12 function  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
 77 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
 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 < %
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 < 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 " >
 3 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
13 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
29  i = i + 1
30  rs.MoveNext
31 Loop
32
33 Set  rs  =   Nothing
34 % >
35 parent.ArrToHtml(ArrNode, ' <% = nodeid %>');
36 -->
37 </ script >
38 < %
39 Set  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>
 6 function fos() {} {
 7if(style.backgroundColor!='#ffffff'){
 8style.color="#000000"
 9style.border="1 solid #888888"
10style.backgroundColor='#DDDDDD'
11}
12 else
13 {} {style.color="#000000"
14style.border="1 solid #999999"
15style.backgroundColor='#ffffff'
16}
17 }
18
19 function blu() {} {
20if(style.backgroundColor!='#ffffff'){
21style.color="#000000"
22style.border="1 solid #f2f2f2"
23style.backgroundColor='#f2f2f2'
24}
25 else
26 {} {style.color="#000000"
27style.border="1 solid #999999"
28style.backgroundColor='#ffffff'
29}
30 }
31
32 function st() {} {
33return false;
34}
35 </SCRIPT>
36 </PUBLIC:COMPONENT>

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

 1 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 width:11px;
17 height:11px;
18 border:solid 1px black;
19 background-color:#ffffff;
20 cursor:hand;
21}
22 span.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（文本）