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

原创 2003年01月20日 09:51:00

MSDN 和CSDN 左边导航树的效果都是在点击父节点时,再发出请求填充其子节点!好像网页只刷新部分! 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'>
      &nbsp;&nbsp;正在加载 ...
     </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 + "&nbsp;&nbsp;"
  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 & "&nbsp;&nbsp;正在加载 ...</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)

类似 MSDN CSDN 左边导航树效果的实现! [JavaScript +

MSDN 和CSDN 左边导航树的效果都是在点击父节点时,再发出请求填充其子节点!好像网页只刷新部分! JavaScript + [ASP +  Access] 实现源程序下载: http:...
  • zgqtxwd
  • zgqtxwd
  • 2008年04月24日 19:26
  • 117

类似 MSDN CSDN 左边导航树效果的实现!

 MSDN 和CSDN 左边导航树的效果都是在点击父节点时,再发出请求填充其子节点!好像网页只刷新部分! JavaScript + [ASP +  Access] 实现源程序下载: http://ww...
  • SimpleDay
  • SimpleDay
  • 2005年12月16日 16:21
  • 1047

类似 MSDN CSDN 导航树效果 ASP.Net(C#) + JavaScript 实现!

使用该 URL  http://localhost/WebApplicationX/WebForm1.aspx  在 Flashget 中下载切换 暂停/开始 , 并增加下载的块数 测试!原理参见上...
  • playyuer
  • playyuer
  • 2003年06月02日 18:09
  • 1767

JSP + JavaScript 实现类似 MSDN CSDN 导航树效果!

测试站点:http://www.triaton.com.cn:1080/examples/tree/tree.jsp类似 MSDN CSDN 导航树效果,JSP + JavaScript 实现!  ...
  • playyuer
  • playyuer
  • 2003年06月02日 18:09
  • 1576

类似 MSDN CSDN 导航树效果 ASP.Net(C#) + JavaScript

  • zgqtxwd
  • zgqtxwd
  • 2008年04月24日 12:20
  • 144

基于JS的树形导航的实现

网上找了个JS的树形导航,先要下载那个js包,然后放在项目中,才可以使用,做了一个小例子,留着备用。 页面文件要放在那个js包共同的上级文件夹中,否则会找不到图片。 示例代码:前台:...
  • dannywj1371
  • dannywj1371
  • 2011年03月30日 15:11
  • 2749

左边导航树,右面页面的问题

1、使用table标签的问题代码:
  • wzuden
  • wzuden
  • 2016年07月01日 20:57
  • 901

jquery-easyui 动态树

首选在jsp页面中引入相关的js /css/jquery_easyui/themes/default/easyui.css"> /css/jquery_easyui/themes/icon.cs...
  • xinghui_liu
  • xinghui_liu
  • 2012年03月23日 16:26
  • 4436

网页导航树的简单快速美观之实现

导航树在Web应用中较为广泛。它能够向浏览者展示清晰、层次分明的信息组织结构形式,从而使浏览者较易从总体上把握信息架构。 导航树目前讨论较多的导航树的实现,大多是编写JavaScript代码,无论从程...
  • hbccgg
  • hbccgg
  • 2011年05月02日 14:56
  • 2628

JavaScript+CSS实现经典的树形导航栏

在一些管理系统里面,一般右侧都会有树形的导航栏,点击一下就会出现下拉菜单,显示出来该父菜单下面的子菜单 项目,然后配以图片,和CSS的效果,可以说是非常常用的功能,现在做一个项目,正好用到这个功能,...
  • a352193394
  • a352193394
  • 2012年03月25日 21:03
  • 7052
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:类似 MSDN CSDN 左边导航树效果的实现! [JavaScript + ASP]
举报原因:
原因补充:

(最多只允许输入30个字)