当前位置：Gxlcms > ASP > 关于无限分级(ASP+数据库+JS)的实现代码

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

时间：2021-07-01 10:21:17 帮助过：29人阅读

代码可以优化，请根据自己需求进行优化
说明：
所先把所有分类读取存放到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>

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)
%>

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

人气教程排行