关于无限分级(ASP+数据库+JS)的实现代码

代码可以优化,请根据自己需求进行优化 

说明:

所先把所有分类读取存放到JS数组中(如果数据量大可能就有点麻烦)

当选择时候返回父分类ID 在从数组中找出符合的分类,然后显示给用户

数据库设计(可以根据自己需求添加字段,如此分类属于什么分类等等)

字段            类型          说明

id               自动编号     记录编号

cotename    文本           分类名称

byid            数字           父分类ID(即为此表ID,根接点时值为0)

JS部分代码(命名为*.asp)

复制代码 代码如下:

<%Dim conn

Set conn=Server.CreateObject("ADODB.Connection")

conn.ConnectionString = "Provider=Microsoft.Jet.OLEDB.4.0;" & _

"Data Source=" & Server.MapPath("Cote.mdb")

conn.Open

%>

function CheckLm(thevalue){

  var byid=new Array();

  var cotename=new Array();

  var id=new Array();

  var i;

  var id_s;

  var byid_s;

  var cotename_s;

  var thevalue_r; 

  var data='<select name="lm" onchange="CheckLm(this.value)">'

  id_s="|";

  cotename_s='-选择-|';

  <%set rs=server.CreateObject("adodb.recordset")

     sql="select * from [DB_Cote] Order by byid,id"

    rs.open sql,conn,1,1

      i=0

   if not rs.eof then

     do while not rs.eof 

       response.Write("id["&i&"]="&rs("id")&";"&chr(10))

    response.Write("byid["&i&"]="&rs("byid")&";"&chr(10))

    response.Write("cotename["&i&"]='"&rs("cotename")&"';"&chr(10))

     rs.movenext

     i=i+1

     loop

   else

     response.Write("id[0]=0;byid[0]=0;cotename[0]='无分类';")

   end if

   rs.close

  set rs=nothing%>

  if(thevalue==null||thevalue==undefined||thevalue==''){thevalue=0;}

  //if(lmvalue==null||lmvalue==undefined||lmvalue==''){lmvalue=0;}

    for(k=0;k<id.length;k++){

      if(thevalue==id[k]){id_s+=thevalue+"|";cotename_s+=cotename[k]+"|";thevalue_r=byid[k];break;}else{thevalue_r=0;}

    }

   for(i=0;i<id.length;i++){

     if(thevalue==byid[i]){

    id_s+=id[i]+"|";cotename_s+=cotename[i]+"|";

    } 

   }

   if(id_s=='-1|'){

      for(i=0;i<id.length;i++){

     if(thevalue==id[i]){

  id_s+=id[i]+"|";cotename_s+=cotename[i]+"|";

  } 

   } 

    }

  id_v=id_s.split("|");

  cotename_v=cotename_s.split("|");

  var length=id_v.length-1;  

  for(j=0;j<length;j++){

    if(thevalue==id_v[j]){

    data+="<option value='"+id_v[j]+"' selected>"+cotename_v[j]+"</option>";}

    else{

    data+="<option value='"+id_v[j]+"'>"+cotename_v[j]+"</option>";

    }

   }

  if(thevalue!=0){data+="<option value='"+thevalue_r+"'>上级分类</option>";}

 //alert(length+'/'+thevalue);

    var lm=document.getElementById('lmid');

 lm.innerHTML=data+"</select>";

}

<%Conn.Close:Set Conn=Nothing%>

调用页面代码

复制代码 代码如下:

<%

Dim lm

lm=request("lm")

if lm=Empyt or Not Isnumeric(lm) then lm=0

%>

<html>

<script type="text/javascript" src="*.asp"></script>

<body onLoad="CheckLm(<%=lm%>)">

<div id="lmid"></div>

</body>

</html>

运行后结果 

<html> <script language="javascript"> function CheckLm(thevalue){ var byid=new Array(); var cotename=new Array(); var id=new Array(); var i; var id_s; var byid_s; var cotename_s; var thevalue_r; var data='<select name="lm" onchange="CheckLm(this.value)">' id_s="|"; cotename_s='-选择-|'; id[0]=1; byid[0]=0; cotename[0]='大栏目1'; id[1]=7; byid[1]=0; cotename[1]='大栏目2'; id[2]=2; byid[2]=1; cotename[2]='├大栏目1-1'; id[3]=3; byid[3]=1; cotename[3]='├大栏目1-2'; id[4]=4; byid[4]=1; cotename[4]='├大栏目1-3'; id[5]=5; byid[5]=4; cotename[5]='├-大栏目1-3-a'; id[6]=6; byid[6]=4; cotename[6]='├-大栏目1-3-b'; id[7]=10; byid[7]=6; cotename[7]='├--大栏目1-3-b-1'; id[8]=11; byid[8]=6; cotename[8]='├--大栏目1-3-b-2'; id[9]=12; byid[9]=6; cotename[9]='├--大栏目1-3-b-3'; id[10]=8; byid[10]=7; cotename[10]='├大栏目2-1'; id[11]=9; byid[11]=7; cotename[11]='├大栏目2-2'; if(thevalue==null||thevalue==undefined||thevalue==''){thevalue=0;} //if(lmvalue==null||lmvalue==undefined||lmvalue==''){lmvalue=0;} for(k=0;k<id.length;k++){ if(thevalue==id[k]){id_s+=thevalue+"|";cotename_s+=cotename[k]+"|";thevalue_r=byid[k];break;}else{thevalue_r=0;} } for(i=0;i<id.length;i++){ if(thevalue==byid[i]){ id_s+=id[i]+"|";cotename_s+=cotename[i]+"|"; } } if(id_s=='-1|'){ for(i=0;i<id.length;i++){ if(thevalue==id[i]){ id_s+=id[i]+"|";cotename_s+=cotename[i]+"|"; } } } id_v=id_s.split("|"); cotename_v=cotename_s.split("|"); var length=id_v.length-1; for(j=0;j<length;j++){ if(thevalue==id_v[j]){ data+="<option value='"+id_v[j]+"' selected>"+cotename_v[j]+"</option>";} else{ data+="<option value='"+id_v[j]+"'>"+cotename_v[j]+"</option>"; } } if(thevalue!=0){data+="<option value='"+thevalue_r+"'>上级分类</option>";} //alert(length+'/'+thevalue); var lm=document.getElementById('lmid'); lm.innerHTML=data+"</select>"; } </script> <body onLoad="CheckLm(0)"> </body> </html>

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

数据库:

递归
复制代码 代码如下:
Sub GetA(TheID)

set rs=server.CreateObject("adodb.recordset")
dim rs,sql
     sql="select * from [DB_Cote] Where ByID in("&TheID&")"
    rs.open sql,conn,1,1
      i=0
   if not rs.eof then
     do while not rs.eof 
       response.Write(rs("cotename")&"<br>")
    call GetA(Rs("id"))
     rs.movenext
     i=i+1
     loop   
   end if
   rs.close
  set rs=nothing

End Sub

if m=empty then m=0
call GetA(m)
%>

时间: 2024-09-30 18:55:25

关于无限分级(ASP+数据库+JS)的实现代码的相关文章

asp.net+js实时奥运金牌榜代码第1/2页_实用技巧

复制代码 代码如下: <script language="JavaScript" type="text/javascript"> //测试浏览器类型// var Browser = new Object(); Browser.ua = window.navigator.userAgent.toLowerCase(); Browser.ie = /msie/.test(Browser.ua); Browser.moz = /gecko/.test(Brow

jstree创建无限分级树的方法【基于ajax动态创建子节点】_javascript技巧

本文实例讲述了jstree创建无限分级树的方法.分享给大家供大家参考,具体如下: 首先来看一下效果 页面加载之初 节点全部展开后 首先数据库的表结构如下 其中Id为主键,PId为关联到自身的外键 两个字段均为GUID形式 层级关系主要靠这两个字段维护 其次需要有一个类型 public class MenuType { public Guid Id { get; set; } public Guid PId { get; set; } public string MenuName { get; s

使用jstree创建无限分级的树(ajax动态创建子节点)

首先来看一下效果 页面加载之初 节点全部展开后 首先数据库的表结构如下 其中Id为主键,PId为关联到自身的外键 两个字段均为GUID形式 层级关系主要靠这两个字段维护 其次需要有一个类型 public class MenuType { public Guid Id { get; set; } public Guid PId { get; set; } public string MenuName { get; set; } public string Url { get; set; } pub

ASP数据库被挂马的编程处理方法

数据库被挂马我相信很多人都碰到过.在这里,我讲下我处理的方法.     第一步:为现有数据库做好备份.     第二步:执行如下ASP文件,这样就可以去掉数据库当中的JS木马:     注:conn.asp自己去写了.     '这里放入JS木马内容:请记得改为自己数据库中的JS木马内容.     <!--#include file="conn.asp"-->     <%     Server.ScriptTimeOut=180 Set rstSchema = co

仅用css编写无限分级弹出菜单

css|菜单 一直以来,我们大多使用js来实现弹出菜单,可是根据 w3c 的css标准,根本就没有这个必要.只需要简单得使用css+html就可以做出一个无限分级的弹出菜单.没错,就是利用 Element:hover 这个伪类.注意,浏览这个例子,你必须使用标准浏览器,例如 Mozilla Firefox/ Opera 7.5 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.

用css编写的适合标准浏览器的无限分级弹出菜单

css|标准|菜单|浏览器 一直以来,我们大多使用js来实现弹出菜单,可是根据 w3c 的css标准,根本就没有这个必要.只需要简单得使用css+html就可以做出一个无限分级的弹出菜单. 没错,就是利用 Element:hover 这个伪类. 注意,浏览这个例子,你必须使用标准浏览器,例如 Mozilla Firefox/ Opera 7.5 IE 不行!! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" &qu

利用ASP嵌套JS+SQL Server打造两级连动下拉框(一)

js|server|下拉 利用ASP嵌套JS+SQL Server打造两级连动下拉框(1)   随着网络技术的迅速发展,越来越多的电子商务网站也应运而生.而在构建一个功能强大的电子商务网站往往少不了提供网上注册功能给客户自行注册这个模块,为了尽可能方便客户填写信息,我们经常要用到下拉框供客户选择,特别是两级连动下拉框最为常用. 再说,本人今日发现CSDN论坛上也经常有网友提问这个问题,就是,需要一个两级连动下拉框,第一个显示省份名称,第二个显示相应的城市名.为了解答这个问题,我特别写这篇文章,希

不用script仅用css编写无限分级弹出菜单

css|菜单 一直以来,我们大多使用js来实现弹出菜单,可是根据 w3c 的css标准,根本就没有这个必要.只需要简单得使用css+html就可以做出一个无限分级的弹出菜单. 没错,就是利用 Element:hover 这个伪类. 注意,浏览这个例子,你必须使用标准浏览器,例如 Mozilla Firefox/ Opera 7.5 IE 不行!! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http

jquery实现无限分级横向导航菜单的方法

 这篇文章主要介绍了jquery实现无限分级横向导航菜单的方法,实例分析了基于jQuery插件操作html与对应样式实现导航菜单效果的技巧,具有一定参考借鉴价值,需要的朋友可以参考下     本文实例讲述了jquery实现无限分级横向导航菜单的方法.分享给大家供大家参考.具体实现方法如下: 1. jquery插件版本代码如下: 代码如下: (function($){ $.fn.extend({ droplinemenu: function(configs) { var configs = $.e