类似 MSDN 8miu 左边导航树效果的实现! [JavaScript + ASP]

    技术2022-05-11  111

    MSDN 和 左边导航树的效果都是在点击父节点时,再发出请求填充其子节点!好像网页只刷新部分! JavaScript + [ASP +  Access] 实现

    源程序下载: http://www.triaton.com.cn/Private/Zip/Tree.zip

    <!-- Tree.asp --><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE> New Document </TITLE><META NAME="Generator" CONTENT="EditPlus"><META NAME="Author" CONTENT=""><META NAME="Keywords" CONTENT=""><META NAME="Description" CONTENT=""></HEAD><BODY><iframe width="100%" height="30" id="hiddenframe"></iframe><script>function ExpandNode(ParentNode,ParentId){var NodeX = eval(ParentNode.id + '_0');if (NodeX.style.display == 'none')   {    NodeX.style.display="block";    if (NodeX.loaded == 'no')       {        document.frames['hiddenframe'].location.replace("http://localhost/dvbbs/subtree.asp?PID=" + ParentId + "&PNode=" + ParentNode.id);        NodeX.loaded = 'yes';      }   }else   {    NodeX.style.display='none';   }}</script><CENTER><TABLE border="1" width="20%" height="60%">   <TR>      <TD>         <DIV style="OVERFLOW: auto;WIDTH: 100%;HEIGHT:100%">            <TABLE width =300%>               <TR>                   <TD><%  dim adoConnection  set adoConnection = Server.CreateObject("ADODB.Connection")  'adoConnection.Open "Provider=SQLOLEDB.1;Persist Security Info=False;User ID=sa;Initial Catalog=Test;Data Source=TRIATON/PSQL2KE"  adoConnection.Open "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & Server.mappath("/dvbbs") & "/Tree.mdb;Persist Security Info=False"  dim adoRecordset  set adoRecordset = Server.CreateObject("ADODB.Recordset")  adoRecordset.Open "select *,(select count(*) from tree where parentid = T.id) as children from tree T where rootid = id ",adoConnection  dim i  i=0  do until adoRecordset.eof %><div id='Node_<% = i %>'>     <a href='#'<%  if adoRecordset.Fields.item("Children").value >0 then %>        onClick='ExpandNode(Node_<% = i %>,<% =adoRecordset.Fields.item("id").value%>)'>+</a>  <% else %>        >-</a>  <% end if%><a href='#' onDblClick='ExpandNode(Node_<% = i %>,<% =adoRecordset.Fields.item("id").value%>)'><% =adoRecordset.Fields.item("remark").value%></a></div> <div id='Node_<% = i %>_0' style='display: none' loaded='no'>        正在加载 ...     </div><%   i=i+1     adoRecordset.MoveNext  loop  adoRecordset.close  set adoRecordset = nothing  adoConnection.close  set adoConnection = nothing%>                   </TD>               </TR>            </TABLE>         </DIV>      </TD>   </TR></TABLE></CENTER></BODY></HTML>

     

    <!-- SubTree.asp --><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE> New Document </TITLE><META NAME="Generator" CONTENT="EditPlus"><META NAME="Author" CONTENT=""><META NAME="Keywords" CONTENT=""><META NAME="Description" CONTENT=""></HEAD><BODY><%  dim parentid  parentid = request.querystring("PID")  parentnode = request.querystring("Parentnode")  dim adoConnection  set adoConnection = Server.CreateObject("ADODB.Connection")'  adoConnection.Open "Provider=SQLOLEDB.1;Persist Security Info=False;User ID=sa;Initial Catalog=Test;Data Source=TRIATON/PSQL2KE"

      adoConnection.Open "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & Server.mappath("/dvbbs") & "/Tree.mdb;Persist Security Info=False"  dim adoRecordset  set adoRecordset = Server.CreateObject("ADODB.Recordset")  adoRecordset.Open "select *,(select count(*) from tree where parentid =T.id ) as Children from tree T where parentid = " & parentid ,adoConnection  response.write  adoRecordset.source  dim i  Dim SHTML  dim parentnode  parentnode = request.querystring("Pnode")  dim j  j= len(parentnode) - len(replace(parentnode,"_",""))  dim nSpace  for i=0 to j - 1      nSpace = nSpace + "  "  next  i=0  do until adoRecordset.eof     shtml = shtml _             & "<div id='" & parentnode & "_" & i + 1 & "'>" & nSpace _             & "<a href='#'"       if adoRecordset.Fields.item("Children").value >0 then         shtml = shtml & " onClick='ExpandNode(" & parentnode & "_" & i + 1 & "," & adoRecordset.Fields.item("id").value & ")'>+"      else         shtml = shtml & ">-"      end if      shtml = shtml & "</a>/n" & "<a href='#'"      if adoRecordset.Fields.item("Children").value >0 then         shtml = shtml & "onDblClick='ExpandNode(" & parentnode & "_" & i + 1 & "," & adoRecordset.Fields.item("id").value & ")'"      end if      shtml = shtml & ">" & adoRecordset.Fields.item("id").value & ": " &  adoRecordset.Fields.item("remark").value & "</a></div>"      if adoRecordset.Fields.item("Children").value >0 then         shtml = shtml & "<div id='" & parentnode & "_" & i + 1 & "_0' style='display: none' loaded='no'>" & nSpace & "  正在加载 ...</div>"      end if      i=i+1      adoRecordset.MoveNext  loop  adoRecordset.close  set adoRecordset = nothing  adoConnection.close  set adoConnection = nothing'response.write shtml%><script>   var x = eval('parent.' + '<% =request.querystring("Pnode") & "_0"%>' ) ;   x.innerHTML="<% =shtml %>";</script></BODY></HTML>

    表结构:Tree(id,parentid,remark)


    最新回复(0)