设为首页收藏本站
切换到窄版

 找回密码
 注册
金光网»广场 › ╃ 建 站 技 术 ╆ › 『网站建设』 › [原创]按树形结构显示 类-子类 (可展开与收缩) (ASP+Jav ...
【阿里云】2核2G云新老同享 99元/年,续费同价华为云精选云产品特惠做网站就用糖果主机Jtti,新加坡服务器,美国服务器,香港服务器
12下一页
返回列表 发新帖
查看: 2437|回复: 10

[原创]按树形结构显示 类-子类 (可展开与收缩) (ASP+JavaScript源码分析)

[复制链接]
发表于 2005 年 6 月 2 日 12:34:00 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要 登录 才可以下载或查看，没有账号？注册

×
事情源于帮朋友修改一个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=&quotroduct.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=&quotroduct.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/
产品分类可以以大类->小类的以树形结构来显示，最后各小类链接到相应小类的产品链接上去。

                               
登录/注册后可看大图

++++++++++++++++++++++++++++++++++++++

                               
登录/注册后可看大图
Jgwy.Com - Free Web Hosting Guide & Directory In China since 2001! Jgwy.Net-Jglt.Net
回复

使用道具 举报

发表于 2005 年 6 月 2 日 12:43:15 | 显示全部楼层
【腾讯云】2核2G云服务器新老同享 99元/年，续费同价
恩 支持下，
偶没用过asp
Jgwy.Com - Free Web Hosting Guide & Directory In China since 2001! Jgwy.Net-Jglt.Net
回复 顶 踩

使用道具 举报

发表于 2005 年 6 月 2 日 14:11:07 | 显示全部楼层
有没有php的？？
或者直接js的？
Jgwy.Com - Free Web Hosting Guide & Directory In China since 2001! Jgwy.Net-Jglt.Net
回复 顶 踩

使用道具 举报

 楼主| 发表于 2005 年 6 月 2 日 14:32:36 | 显示全部楼层
php的没有试过，按这个思路应该是可以的。

  直接JS是不可能的，读取数据庫内容是JS完成不了的，这段代码中有JS的代码，主要是用来
在客户端实现这种效果。
Jgwy.Com - Free Web Hosting Guide & Directory In China since 2001! Jgwy.Net-Jglt.Net
回复 顶 踩

使用道具 举报

 楼主| 发表于 2005 年 6 月 2 日 12:34:00 | 显示全部楼层

[原创]按树形结构显示 类-子类 (可展开与收缩) (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=&quotroduct.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=&quotroduct.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/
产品分类可以以大类->小类的以树形结构来显示，最后各小类链接到相应小类的产品链接上去。

                               
登录/注册后可看大图

++++++++++++++++++++++++++++++++++++++

                               
登录/注册后可看大图
Jgwy.Com - Free Web Hosting Guide & Directory In China since 2001! Jgwy.Net-Jglt.Net
回复 顶 踩

使用道具 举报

 楼主| 发表于 2005 年 6 月 2 日 12:34:00 | 显示全部楼层

[原创]按树形结构显示 类-子类 (可展开与收缩) (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=&quotroduct.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=&quotroduct.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/
产品分类可以以大类->小类的以树形结构来显示，最后各小类链接到相应小类的产品链接上去。

                               
登录/注册后可看大图

++++++++++++++++++++++++++++++++++++++

                               
登录/注册后可看大图
Jgwy.Com - Free Web Hosting Guide & Directory In China since 2001! Jgwy.Net-Jglt.Net
回复 顶 踩

使用道具 举报

 楼主| 发表于 2005 年 6 月 2 日 12:34:00 | 显示全部楼层
【腾讯云】2核2G云服务器新老同享 99元/年，续费同价

[原创]按树形结构显示 类-子类 (可展开与收缩) (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=&quotroduct.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=&quotroduct.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/
产品分类可以以大类->小类的以树形结构来显示，最后各小类链接到相应小类的产品链接上去。

                               
登录/注册后可看大图

++++++++++++++++++++++++++++++++++++++

                               
登录/注册后可看大图
Jgwy.Com - Free Web Hosting Guide & Directory In China since 2001! Jgwy.Net-Jglt.Net
回复 顶 踩

使用道具 举报

 楼主| 发表于 2005 年 6 月 2 日 12:34:00 | 显示全部楼层

[原创]按树形结构显示 类-子类 (可展开与收缩) (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=&quotroduct.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=&quotroduct.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/
产品分类可以以大类->小类的以树形结构来显示，最后各小类链接到相应小类的产品链接上去。

                               
登录/注册后可看大图

++++++++++++++++++++++++++++++++++++++

                               
登录/注册后可看大图
Jgwy.Com - Free Web Hosting Guide & Directory In China since 2001! Jgwy.Net-Jglt.Net
回复 顶 踩

使用道具 举报

 楼主| 发表于 2005 年 6 月 2 日 12:34:00 | 显示全部楼层

[原创]按树形结构显示 类-子类 (可展开与收缩) (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=&quotroduct.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=&quotroduct.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/
产品分类可以以大类->小类的以树形结构来显示，最后各小类链接到相应小类的产品链接上去。

                               
登录/注册后可看大图

++++++++++++++++++++++++++++++++++++++

                               
登录/注册后可看大图
Jgwy.Com - Free Web Hosting Guide & Directory In China since 2001! Jgwy.Net-Jglt.Net
回复 顶 踩

使用道具 举报

 楼主| 发表于 2005 年 6 月 2 日 12:34:00 | 显示全部楼层

[原创]按树形结构显示 类-子类 (可展开与收缩) (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=&quotroduct.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=&quotroduct.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/
产品分类可以以大类->小类的以树形结构来显示，最后各小类链接到相应小类的产品链接上去。

                               
登录/注册后可看大图

++++++++++++++++++++++++++++++++++++++

                               
登录/注册后可看大图
Jgwy.Com - Free Web Hosting Guide & Directory In China since 2001! Jgwy.Net-Jglt.Net
回复 顶 踩

使用道具 举报

下一页 »
12下一页
返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 注册

本版积分规则

Archiver|手机版|小黑屋|金光论坛

GMT+8, 2024 年 11 月 19 日 11:27 , Processed in 0.023973 second(s), 21 queries .

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表