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

最新推荐文章于 2024-04-30 16:57:21 发布

zgqtxwd

最新推荐文章于 2024-04-30 16:57:21 发布

阅读量223

点赞数

文章标签： javascript security generator tree html div

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

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

<!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=TRIATONPSQL2KE"
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>

<!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=TRIATONPSQL2KE"

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>" & "<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)

zgqtxwd

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
类似 MSDN CSDN 左边导航树效果的实现! [JavaScript +

<script type="text/javascript"
复制链接

扫一扫