zoukankan      html  css  js  c++  java

  • 动态载入树 (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（文本）
  • 相关阅读:
    一步一步来
    性能管理分析
    css架构
    bootstrap栅格系统的div高度怎样定？
    有效地重构代码
    模块化开发
    性能优化和模块化
    表单只能输入数字
    SpringMVC拦截器
    整合SSM
  • 原文地址：https://www.cnblogs.com/Dicky/p/154062.html
Copyright © 2011-2022 走看看