无限分类算法 js 的实现

通过asp 动态生成 js 的数组，然后js在客户端去排列，最大的减少了服务器端的压力。(服务器端只是查询了一次，没有其他操作)
**数据库设计：
**

id:索引，自动编号
mc:varchar 100字节，记录分类名称
fl:数字,记录属于哪个分类,0为根分类
ceng:数字,记录处于多少层根分类为0层,以后递增1
**生成的html代码如下：
**

 1<html>
 2<head>
 3<title>fenlei</title>
 4<meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
 5</head>
 6<body bgcolor="#FFFFFF" text="#000000">
 7<script language="JavaScript">   
 8<!--   
 9var dataArray = {};   
10var tempArray = {};   
11var xx="";   
12tempArray[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";   
13var y=0;   
14function loadNextType(upid){   
15for(var key in tempArray){   
16var temps=tempArray[key].split("@_!_#_$_|_@");   
17var z=temps[1];   
18if(temps[0]==upid){   
19y+=1;   
20xx="";   
21for(k=0;k<parseInt(temps[3]);k++){   
22if(k!=parseInt(temps[3])-1){   
23xx+="&nbsp;";   
24}else{   
25xx+="&nbsp;◇";   
26}   
27}   
28dataArray[y]=temps[0]+"@_!_#_$_|_@"+temps[1]+"@_!_#_$_|_@"+xx+temps[2];   
29loadNextType(z);   
30}   
31}   
32}   
33for(var key in tempArray){   
34var tmp=tempArray[key].split("@_!_#_$_|_@");   
35if(tmp[0]==0){   
36dataArray[y]=tmp[0]+"@_!_#_$_|_@"+tmp[1]+"@_!_#_$_|_@"+"◆"+tmp[2];   
37loadNextType(tmp[1]);   
38y+=1;   
39}   
40}   
41//-->   
42</script>
43<span style="border:1px solid #000000; position:absolute; overflow:hidden;">
44<select name="fenlei" style="margin:-2px;">
45<script language="JavaScript">   
46<!--   
47for(var key in dataArray){   
48var tp=dataArray[key].split("@_!_#_$_|_@");   
49document.write(’<option value=’+tp[1]+’>’+tp[2]+’</option>’);   
50}   
51//-->   
52</script>
53</select></span>
54</body>
55</html>

**服务器端asp代码如下：
**

 1<html>
 2<head>
 3<title>fenlei</title>
 4<meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
 5</head>
 6<body bgcolor="#FFFFFF" text="#000000">
 7<script language="JavaScript">   
 8<!--   
 9var dataArray = {};   
10var tempArray = {};   
11var 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

 1var y=0;   
 2function loadNextType(upid){   
 3for(var key in tempArray){   
 4var temps=tempArray[key].split("@_!_#_$_|_@");   
 5var z=temps[1];   
 6if(temps[0]==upid){   
 7y+=1;   
 8xx="";   
 9for(k=0;k<parseInt(temps[3]);k++){   
10if(k!=parseInt(temps[3])-1){   
11xx+="&nbsp;";   
12}else{   
13xx+="&nbsp;◇";   
14}   
15}   
16dataArray[y]=temps[0]+"@_!_#_$_|_@"+temps[1]+"@_!_#_$_|_@"+xx+temps[2];   
17loadNextType(z);   
18}   
19}   
20}   
21for(var key in tempArray){   
22var tmp=tempArray[key].split("@_!_#_$_|_@");   
23if(tmp[0]==0){   
24dataArray[y]=tmp[0]+"@_!_#_$_|_@"+tmp[1]+"@_!_#_$_|_@"+"◆"+tmp[2];   
25loadNextType(tmp[1]);   
26y+=1;   
27}   
28}   
29//-->   
30</script>
31<span style="border:1px solid #000000; position:absolute; overflow:hidden;">
32<select name="fenlei" style="margin:-2px;">
33<script language="JavaScript">   
34<!--   
35for(var key in dataArray){   
36var tp=dataArray[key].split("@_!_#_$_|_@");   
37document.write(’<option value=’+tp[1]+’>’+tp[2]+’</option>’);   
38}   
39//-->   
40</script>
41</select></span>
42</body>
43</html>

**讲解：
** asp 查询数据库，生成js数据 object(不是数组，类似)
数据库不同的行，对应不同的 tempArray[0] tempArray[1]......
不同字段在每条数据中通过"@!#$|_@"分割，以避免会与数据中的文本有重复。

用js通过递归算法重新排列tempArray 得到dataArray 并循环打印成为select中的option

 1<html>
 2<head>
 3<title>fenlei</title>
 4<meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
 5</head>
 6<body bgcolor="#FFFFFF" text="#000000">
 7<script language="JavaScript">   
 8<!--   
 9var dataArray = {};   
10var tempArray = {};   
11var xx="";

 1var y=0;   
 2function loadNextType(upid){   
 3for(var key in tempArray){   
 4var temps=tempArray[key].split("@_!_#_$_|_@");   
 5var z=temps[1];   
 6if(temps[0]==upid){   
 7y+=1;   
 8xx="";   
 9for(k=0;k<parseInt(temps[3]);k++){   
10if(k!=parseInt(temps[3])-1){   
11xx+="&nbsp;";   
12}else{   
13xx+="&nbsp;◇";   
14}   
15}   
16dataArray[y]=temps[0]+"@_!_#_$_|_@"+temps[1]+"@_!_#_$_|_@"+xx+temps[2];   
17loadNextType(z);   
18}   
19}   
20}   
21for(var key in tempArray){   
22var tmp=tempArray[key].split("@_!_#_$_|_@");   
23if(tmp[0]==0){   
24dataArray[y]=tmp[0]+"@_!_#_$_|_@"+tmp[1]+"@_!_#_$_|_@"+"◆"+tmp[2];   
25loadNextType(tmp[1]);   
26y+=1;   
27}   
28}   
29//-->   
30</script>
31<span style="border:1px solid #000000; position:absolute; overflow:hidden;">
32<select name="fenlei" style="margin:-2px;">
33<script language="JavaScript">   
34<!--   
35for(var key in dataArray){   
36var tp=dataArray[key].split("@_!_#_$_|_@");   
37document.write(’<option value=’+tp[1]+’>’+tp[2]+’</option>’);   
38}   
39//-->   
40</script>
41</select></span>
42</body>
43</html>

用js通过递归算法重新排列tempArray 得到dataArray 并循环打印成为select中的option