📄 在web界面下如何生成像资源管理器一样的树形目录.htm
字号:
<TD bgColor=#297dff width=1> </TD>
<TD width=753>
<TABLE border=0 cellPadding=0 cellSpacing=0 width="100%">
<TBODY>
<TR>
<TD bgColor=#297dff colSpan=2 height=20><FONT color=#ceffff> →
<A href="http://www.aspsky.net/article/index.asp?classid=2"><FONT
color=#ceffff>ASP技术</FONT></A> >> <A
href="http://www.aspsky.net/article/index.asp?classid=2&Nclassid=6"><FONT
color=#ceffff>XML相关</FONT></A> >>
《在Web界面下如何生成像资源管理器一样的树形目录》</FONT></TD></TR>
<TR>
<TD bgColor=#586011 colSpan=2 height=1><SPACER type="block"
width="1"></TD></TR>
<TR>
<TD colSpan=2 height=7></TD></TR>
<TR>
<TD align=middle class=p4
colSpan=2><B>在Web界面下如何生成像资源管理器一样的树形目录</B></FONT><BR>2002-4-1 动网先锋
</TD></TR>
<TR>
<TD class=p4 colSpan=2>
<BLOCKQUOTE><BR>关键字 数形目录 XML ASP Web Javascript <BR>
<P></P>
<P><BR>树形目录显示程序<BR>问题描述：<BR>在我们项目中常常会出现自关联的数据表，如果我们从整体看去，整个表就呈现为一个树形数据结构（对于复杂的情况，它可能变成一个图）。当我们对这个表进行显示，编辑时，如果不采用好的表现形式，会显得很笨拙，为此，我们开发这样的树形结构的程序。在上一版本中，我们使用的是递归算法来实现，在我们对这个算法评测时发现，对于拥有成千上万条记录的数据库就不再能胜任了，所以在新的算法版本中，我们使用了XML技术，动态的发现数据，以解决一次从服务器下在大量数据的尴尬，同时也遍免了如果表数据结构呈现为图时就会进入死循环的错误。</P>
<P>实际思路：<BR>1、 初始显示时只显示根与二级节点，根与二级节点同在一层次<BR>2、
点击一节点，如果它的子节点区域对象不存在，则建立对象，同时下载数据更新数据，显示所有子节点。<BR>3、
每个节点在建立后都就有相同的功能，如检查子节点是否存在，显示隐藏子节点等等<BR>4、
DHTML+XML+ASP+CSS同时使用<BR>技术难点：<BR>1、
使用xmlhttp接口时乱码问题：<BR>因为在asp输出页面中，缺省的编码方案并不是中文的，那么在客户端页面的xmlhttp中解释时，就会以缺省的方案解析，所以就会出现乱码。为此，我们在Server端的asp页面中，加入如下代码定义编码方案：<BR>Response.CharSet="GB2312"<BR>Response.ContentType="text/html"</P>
<P>2、
如何在界面上保持上一版本的风格（类资源管理器形式）：<BR>在上一版本中，所有的页面内容都是一气呵成的，在控制上采用递归等思想，所有时的界面相对友好，当时本版中的机制发生了变化，内容是有多次合成的<BR>关键问题，img
,span 对象的id
如何确定<BR>经过求证，在界面上，本版本的界面难以与第一界面相同，所以只能保留一部分，但是总体来说，新界面同样也能满足需要</P>
<P>因为在这里不好使用附件，所以只能贴源码了：</P>
<P>---xtree.html-------------------------------------------------------------------</P>
<P><HTML><BR><HEAD><BR><META NAME="GENERATOR"
Content="Microsoft Visual Studio 6.0"><BR><SCRIPT
LANGUAGE=javascript
src="xtree.js"><BR></SCRIPT><BR><style
type="text/css"><BR><!--<BR>a:link { font-size: 14px;
text-decoration: none; color: #0000FF}<BR>a:visited { font-size:
14px; color: #0000FF; text-decoration: none}<BR>a:hover {
font-size: 14px; color: #FF0000; background-color: #CCCC99;
text-decoration: none}<BR>a:active { font-size: 14px; color:
#FFFFFF; background-color: #191970; text-decoration:
none}<BR>.item{
font-size:14px}<BR>--><BR></style><BR></HEAD><BR><BODY
leftMargin=0 rightMargin=0 topMargin=0
border=0><BR><bold>树形菜单演示程序</bold><br><BR><table
border=0><BR><tr><td nowrap><BR><span
id='oSpanroot' border=0></span><SCRIPT
LANGUAGE=javascript>createChildNode("root",0);</SCRIPT></td></tr><BR></table><BR></BODY><BR></HTML></P>
<P><BR>-------xtree.asp---------------------------------------------------------------</P>
<P><%@ Language=VBScript
%><BR><%<BR>Response.CharSet="GB2312"<BR>Response.ContentType="text/html"<BR>'''''''''''''''''''''''''''''''Server
code start'''''''''''''''''''''''''''''''<BR>dim
parId,nodeLayer<BR>parid=Request.QueryString("parId")<BR>nodeLayer=cint(Request.QueryString("nodeLayer"))</P>
<P>if(parid="") then <BR>Response.Write("root id can't is
null")<BR>Response.End() <BR>end if<BR>if(nodeLayer<0)
then<BR>nodeLayer=0</P>
<P>end if<BR>%><BR><%<BR>strconn="at"<BR>strsql="select *
from tree where par='"&parid&"'"<BR>''SQL
语句书写要求：在记录集的前面三个字段必须依次为：row_id（惟一的主键）、name（菜单条显示的内容）、par_id（父节点row_id),其它根据需要输出与显示<BR>set
conn=server.createobject("ADODB.connection")<BR>conn.open
strconn</P>
<P>set rs=server.createobject("ADODB.Recordset")<BR>rs.open
strsql,conn,3,3<BR>i=0<BR>dim row_id<BR>row_id=""<BR>while not
rs.EOF<BR>row_id=rs.Fields("row_id").Value<BR>name=rs.Fields("name").Value<BR>j=0<BR><BR>while
j<nodeLayer<BR>Response.Write("<img
src='blank.bmp'>")<BR>j=j+1<BR>wend<BR>Response.Write("<img
id='objNode"&row_id&"' style='cursor:hand' src='open.bmp'
onclick=javascript:createChildNode('"&row_id&"',"&nodeLayer+1&")
border=0 align='absmiddle'>")<BR>Response.Write("<img
src='blank.bmp' border=0
align='absmiddle'>")<BR>Response.Write("<a class=item
href='view.asp?id="&row_id&"'
target='mainFrame'>"&Trim(name)&"</a></br>")
'项目内容<BR>Response.Write("<span id='oSpan"&row_id&"'
></span>")
'子节点内容区域<BR>i=i+1<BR>rs.MoveNext<BR>wend<BR>'''''''''''''''''''''''''''''''''''''''''Server
Code END ''''''''''''''''''''''''''''''''''<BR>%> </P>
<P>---------xtree.js-----------------------------------------------------------------------------</P>
<P>function
getChildTree(parId,nodeLayer)<BR>//parId:=夫节点id,nodeLayer:=子节点所属层次<BR>{<BR>var
xmlhttp = new ActiveXObject
("Microsoft.XMLHTTP");<BR>xmlhttp.Open("get",
"xtree.asp?parId="+parId+"&nodeLayer="+nodeLayer,
false);<BR>xmlhttp.Send("Author:taojianbo;Version:2.0");<BR>return
xmlhttp.responseText;<BR>}</P>
<P>function
showHide(objid)<BR>//显示，隐藏区域，达到菜单显示的目的<BR>//objid:=区域对象ID的parid部分<BR>{<BR>var
temp;<BR>eval("temp=oSpan"+objid+".style.display");<BR>if(temp=="block")
<BR>{<BR>eval("oSpan"+objid+".style.display='none'");<BR>eval("objNode"+objid+".src='open.bmp'");<BR>}<BR>else<BR>{<BR>eval("oSpan"+objid+".style.display='block'");<BR>eval("objNode"+objid+".src='close.bmp'");<BR>}<BR>}//end
function</P>
<P>function
createChildNode(childNodeId,nodeLayer)<BR>//如果子节点内容为空，则初始化，并更新数据<BR>//childNodeId:=子节点对象Id的parid部分<BR>{<BR>var
temp;<BR>eval("temp=oSpan"+childNodeId+".innerHTML");<BR>if(temp=="")<BR>{
<BR>eval("oSpan"+childNodeId+".innerHTML='<div
align=right>LOADING...</div><br>'");<BR>temp=new
String(getChildTree(childNodeId,nodeLayer));<BR>if(temp.length!=0)<BR>{<BR>eval("oSpan"+childNodeId+".innerHTML=temp");<BR>eval("objNode"+childNodeId+".src='close.bmp'");//变为减号<BR>}<BR>else<BR>{//如果temp内容为空，说明未找到子树，则该节点为叶节点，更改相关属性<BR>eval("objNode"+childNodeId+".src='leaf.bmp'");//更改图标<BR>eval("objNode"+childNodeId+".onclick=''");
//取消click事件<BR>eval("oSpan"+childNodeId+".innerHTML=temp");//内容为空<BR>}<BR>}<BR>else<BR>{
showHide(childNodeId);<BR>}<BR>} <BR><BR></P></BLOCKQUOTE></TD></TR>
<TR>
<TD class=p4 vAlign=top width="50%">
<BLOCKQUOTE>原作者：tttk<BR>来 源：开发者俱乐部<BR>共有4698位读者阅读过此文<BR>【<A
href="http://bbs.aspsky.net/list.asp?boardid=1">发表评论</A>】
</BLOCKQUOTE></TD>
<TD class=p4 vAlign=top width="50%">
<P>
<LI><FONT color=#0772b1>上篇文章</FONT>：<A
href="http://www.aspsky.net/article/list.asp?id=2658">嵌入式Web视频点播系统实现方法</A>
<BR>
<LI><FONT color=#0772b1>下篇文章</FONT>：<A
href="http://www.aspsky.net/article/list.asp?id=2660">OO，OO以后，及其极限(1)</A>
</LI></TD></TR>
<TR>
<TD bgColor=#297dff class=p4 height=20 width="50%"><FONT
color=#ceffff> → 本周热门</FONT></TD>
<TD bgColor=#297dff class=p4 width="50%"><FONT color=#ceffff> →
相关文章</FONT></TD></TR>
<TR>
<TD bgColor=#586011 colSpan=2 height=1><SPACER type="block"
width="1"></TD></TR>
<TR>
<TD colSpan=2 height=7></TD></TR>
<TR>
<TD class=p4 vAlign=top width="50%">
<LI><A href="http://www.aspsky.net/article/list.asp?id=1510"
target=_top title="SQL Server 7.0 入门（一）">SQL Server 7.0
入门（...</A>[<FONT color=red>7239</FONT>]<BR>
<LI><A href="http://www.aspsky.net/article/list.asp?id=1540"
target=_top title=PHP4实际应用经验篇(1)>PHP4实际应用经验篇(1)</A>[<FONT
color=red>7135</FONT>]<BR>
<LI><A href="http://www.aspsky.net/article/list.asp?id=1536"
target=_top
title=无组件文件上传代码实例（支持多文件上传及文件和input域混合上传）>无组件文件上传代码实例（支持多文件上...</A>[<FONT
color=red>6029</FONT>]<BR>
<LI><A href="http://www.aspsky.net/article/list.asp?id=2557"
target=_top title=树型结构在ASP中的简单解决>树型结构在ASP中的简单解决</A>[<FONT
color=red>5757</FONT>]<BR>
<LI><A href="http://www.aspsky.net/article/list.asp?id=1545"
target=_top title=PHP4实际应用经验篇(6)>PHP4实际应用经验篇(6)</A>[<FONT
color=red>5599</FONT>]<BR>
<LI><A href="http://www.aspsky.net/article/list.asp?id=2563"
target=_top title=一个老个写的无组件上传>一个老个写的无组件上传</A>[<FONT
color=red>5013</FONT>]<BR>
<LI><A href="http://www.aspsky.net/article/list.asp?id=1542"
target=_top title=PHP4实际应用经验篇(3)>PHP4实际应用经验篇(3)</A>[<FONT
color=red>4731</FONT>]<BR></LI></TD>
<TD class=p4 vAlign=top width="50%">
<LI><A
href="http://www.aspsky.net/article/list.asp?id=2659">在Web界面下如何生成像资源管理器一样的树形目录</A><BR></LI></TD></TR>
<TR>
<TD colSpan=2 height=7></TD></TR></TBODY></TABLE>
<TD bgColor=#297dff width=1> </TD></TR></TBODY></TABLE>
<TABLE border=0 cellPadding=0 cellSpacing=0 width=755>
<TBODY>
<TR>
<TD bgColor=#297dff height=1><SPACER type="block"
width="1"></TD></TR></TBODY></TABLE>
<TABLE border=0 cellPadding=0 cellSpacing=0 width=755>
<TBODY>
<TR>
<TD align=middle height=30></TD></TR></TBODY></TABLE>
<TABLE border=0 cellPadding=0 cellSpacing=0 width=755>
<TBODY>
<TR>
<TD align=middle class=p2 width="100%">
<TABLE border=0 cellPadding=0 cellSpacing=0 width=755>
<TBODY>
<TR>
<TD align=middle class=p2 width="100%">
<P align=center><A
href="http://www.aspsky.net/produce/index.asp">客户服务</A> -- <A
href="http://www.aspsky.net/aspads.asp">广告合作</A> -- <A
href="http://www.aspsky.net/about.asp">关于本站</A> -- <A
href="http://www.aspsky.net/tell.asp">联系方法</A><BR><BR>动网先锋版权所有 <FONT
face=Verdana, size=1 Arial, Helvetica, sans-serif>Copyright ©
2000-2001 <B>AspSky<FONT color=#cc0000>.Net</FONT></B>, All Rights
Reserved .</FONT>
</P></TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></CENTER></CENTER></BODY></HTML>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -