Javascript無限分類算法的實現

通過asp 動態生成 js 的數組,然後js在客戶端去排列,最大的減少瞭服務器端的壓力。(服務器端隻是查詢瞭一次,沒有其他操作)


數據庫設計:


  id: 索引,自動編號
  mc: varchar 100字節,記錄分類名稱
  fl: 數字,記錄屬於哪個分類,0為根分類
  ceng: 數字,記錄處於多少層 根分類為0層,以後遞增1


生成的html代碼如下:


<html>
<head>
<title>fenlei</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″>
</head>
<body bgcolor=”#FFFFFF” text=”#000000″>
<SCRIPT LANGUAGE=”JavaScript”>
<!–
var dataArray = {};
var tempArray = {};
var xx=””;
tempArray[0]=”0@_!_#_$_|_@1@_!_#_$_|_@test@_!_#_$_|_@0″;tempArray[1]=”1@_!_#_$_|_@2@_!_#_$_|_@test1@_!_#_$_|_@1″;tempArray[2]=”2@_!_#_$_|_@3@_!_#_$_|_@test1-test2@_!_#_$_|_@2″;tempArray[3]=”0@_!_#_$_|_@4@_!_#_$_|_@test@_!_#_$_|_@0″;tempArray[4]=”4@_!_#_$_|_@5@_!_#_$_|_@test5@_!_#_$_|_@1″;tempArray[5]=”2@_!_#_$_|_@6@_!_#_$_|_@aaa@_!_#_$_|_@2″;tempArray[6]=”2@_!_#_$_|_@7@_!_#_$_|_@sss@_!_#_$_|_@2″;
var y=0;
function loadNextType(upid){
    for(var key in tempArray){
 var temps=tempArray[key].split(“@_!_#_$_|_@”);
 var z=temps[1];
  if(temps[0]==upid){
  y+=1;
  xx=””;
  for(k=0;k<parseInt(temps[3]);k++){
  if(k!=parseInt(temps[3])-1){
  xx+=”&nbsp;”;
  }else{
  xx+=”&nbsp;◇”;
  }
  }
  dataArray[y]=temps[0]+”@_!_#_$_|_@”+temps[1]+”@_!_#_$_|_@”+xx+temps[2];
  loadNextType(z);
  }
 }
}
for(var key in tempArray){
var tmp=tempArray[key].split(“@_!_#_$_|_@”);
 if(tmp[0]==0){
  dataArray[y]=tmp[0]+”@_!_#_$_|_@”+tmp[1]+”@_!_#_$_|_@”+”◆”+tmp[2];
  loadNextType(tmp[1]);
  y+=1;
 }
}
//–>
</SCRIPT>
<span style=”border:1px solid #000000; position:absolute; overflow:hidden;” >
<select name=”fenlei” style=”margin:-2px;”>
  <SCRIPT LANGUAGE=”JavaScript”>
<!–
for(var key in dataArray){
var tp=dataArray[key].split(“@_!_#_$_|_@”);
document.write(<option value=+tp[1]+>+tp[2]+</option>);
}
//–>
</SCRIPT>
</select></span>
</body>
</html>


服務器端asp代碼如下:


<!–#include file=”../conn.asp”–>
<!–#include file=”ck.asp”–>
<html>
<head>
<title>fenlei</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″>
</head>
<body bgcolor=”#FFFFFF” text=”#000000″>
<SCRIPT LANGUAGE=”JavaScript”>
<!–
var dataArray = {};
var tempArray = {};
var xx=””;
<%
dim sql
Set rs=server.createobject(“adodb.recordset”)
sql=”select * from fenlei”
rs.open sql,conn,1,1
dim x
x=0
do while not rs.eof
response.write “tempArray[” & x & “]=””” &rs(“fl”) & “@_!_#_$_|_@” &rs(“id”) & “@_!_#_$_|_@” & rs(“mc”) & “@_!_#_$_|_@” & rs(“ceng”) & “””;”
x=x+1
rs.movenext
loop
%>
var y=0;
function loadNextType(upid){
    for(var key in tempArray){
 var temps=tempArray[key].split(“@_!_#_$_|_@”);
 var z=temps[1];
  if(temps[0]==upid){
  y+=1;
  xx=””;
  for(k=0;k<parseInt(temps[3]);k++){
  if(k!=parseInt(temps[3])-1){
  xx+=”&nbsp;”;
  }else{
  xx+=”&nbsp;◇”;
  }
  }
  dataArray[y]=temps[0]+”@_!_#_$_|_@”+temps[1]+”@_!_#_$_|_@”+xx+temps[2];
  loadNextType(z);
  }
 }
}
for(var key in tempArray){
var tmp=tempArray[key].split(“@_!_#_$_|_@”);
 if(tmp[0]==0){
  dataArray[y]=tmp[0]+”@_!_#_$_|_@”+tmp[1]+”@_!_#_$_|_@”+”◆”+tmp[2];
  loadNextType(tmp[1]);
  y+=1;
 }
}
//–>
</SCRIPT>
<span style=”border:1px solid #000000; position:absolute; overflow:hidden;” >
<select name=”fenlei” style=”margin:-2px;”>
  <SCRIPT LANGUAGE=”JavaScript”>
<!–
for(var key in dataArray){
var tp=dataArray[key].split(“@_!_#_$_|_@”);
document.write(<option value=+tp[1]+>+tp[2]+</option>);
}
//–>
</SCRIPT>
</select></span>
</body>
</html>


講解:


  asp 查詢數據庫,生成js數據 object(不是數組,類似)
  數據庫不同的行,對應不同的 tempArray[0] tempArray[1]……
  不同字段在每條數據中通過”@_!_#_$_|_@”分割,以避免會與數據中的文本有重復。


  用js通過遞歸算法重新排列tempArray 得到dataArray 並循環打印成為select中的option


 

You May Also Like