[原创]按树形结构显示 类-子类 (可展开与收缩) (ASP+JavaScript源码分析)
事情源于帮朋友修改一个ASP程序，是做商业站的，有产品展示这一项。但他的原程序在显示产品时不合理。因为产品本身是按 大类->小类->产品才分层次的，但他的产品展示程序，只能按大类
来选择，对于显示产品很不方便。但如果由于产品的子类很多，如果全部显示出来，会严重点用版面，影响美观。这时我想到我以前用过一种JavaScript脚本，可以实现象windows文件浏览器样的效果，可以实现类似于windows浏览器的文件夹树形结构，且可以展开与收缩，于是我开始实验把这种脚本与ASP程序结合起来，实现按树形结构显示 大类->子类 (可以收缩与展开的).
下面来看看我改的这段程序
'//JavaScript脚本,用来在客户端显示简洁实用的树形结构
<script language="JavaScript">
<!--
function showLay(divId){
var objDiv = eval(divId);
if (objDiv.style.display=="none"){
eval("sp"+divId+".innerHTML='-'");
objDiv.style.display="";
}else{
eval("sp"+divId+".innerHTML='+'");
objDiv.style.display="none";
}
}
// -->
</script>
asp代码是节选的，只是一个函数，这个函数用来按树形结构显示出所有的类->子类，并链接上相应子类的产品展示链接。
rsBigClass是产品大类的游标,rsBigClassName是大类的名称的变量,rsBigClass("BigClassName')是数据庫中大类的名称这个字段。
rsBigClass是产品小类的游标,rsSmallClassName是大类的名称的变量,rsClass("SmallClassName')是数据庫中大类的名称这个字段。
<%
'//asp代码，节选
sub ShowSmallClass_Tree1()
counter=0 '/定义一个计算数来实现不同的层号
if rsBigClass.bof and rsBigClass.eof then
response.Write "栏目正在建设中……"
else
rsBigClass.movefirst
BigClassNum=rsBigClass.recordcount
do while not rsBigClass.eof
counter=counter+1
sqlClass="select * from SmallClass where BigClassName='" & rsBigClass("BigClassName") & "' Order by SmallClassID"
Set rsClass= Server.CreateObject("ADODB.Recordset")
rsClass.open sqlClass,conn,1,1
if BigClassName<>rsBigClass("BigClassName") then %>
<a href="#" onClick="showLay('Layer<%=counter%>')">
<span id="spLayer<%=counter%>">+</span><%=rsBigClass("BigClassName")%></a><br>
<div id="Layer<%=counter%>" style="display:none;">
<%
do while not rsClass.eof %>
|-<a href="Product.asp?BigClassName=<%=rsBigClass("BigClassName")%>&SmallClassName=<%=rsClass("SmallClassName")%>">
<%=rsClass("SmallClassName")%>
</a><br>
<%
rsClass.movenext
loop
else
%>
<a href="#" onClick="showLay('Layer<%=counter%>')">
<span id="spLayer<%=counter%>">-</span><%=rsBigClass("BigClassName")%></a><br>
<div id="Layer<%=counter%>">
<% do while not rsClass.eof %>
|-<a href="Product.asp?BigClassName=<%=rsBigClass("BigClassName")%>&SmallClassName=<%=rsClass("SmallClassName")%>">
<%=rsClass("SmallClassName")%></a><br>
<% rsClass.movenext
loop
end if
%>
</div>
<%
rsBigClass.movenext
loop
rsClass.close
set rsClass=nothing
end if
end sub
%>
最后看看我修改后的演示吧:
http://skycen.f78.net/hy/
产品分类可以以大类->小类的以树形结构来显示，最后各小类链接到相应小类的产品链接上去。
http://www.photo.zj.com/skycen/101622/301339.gif
++++++++++++++++++++++++++++++++++++++
http://www.photo.zj.com/skycen/101622/301340.gif
页:
1
[2]