Javascript无限分类算法的实现（转）

（来自： http://www.pconline.com.cn/pcedu/empolder/wz/javascript/0510/710147.html）

　通过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() 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