關于無限分級(ASP+數據庫+JS)的實現代碼

2020-07-27 13:09:18

字體：大中小

來源：轉載

供稿：網友

代碼可以優化，請根據自己需求進行優化
說明：
所先把所有分類讀取存放到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)"> <div   class="iwvjtn8m0"   id="lmid"></div> </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) 
%> 