通过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 ="&;amp;nbsp;";
}else{
xx ="&;amp;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代码如下：
[color=#FFFFFF'][/color]
<!--#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[" &;amp; x &;amp; "]=""" &;amp;rs("fl") &;amp; "@_!_#_$_│_@" &;amp;rs("id") &;amp; "@_!_#_$_│_@" &;amp; rs("mc") &;amp; "@_!_#_$_│_@" &;amp; rs("ceng") &;amp; """;"
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 ="&;amp;nbsp;";
}else{
xx ="&;amp;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]......
不同字段在每条数据中通过"@_!_#_$_│_@"分割，以避免会与数据中的文本有重复。
[color=#FFFFFF'][/color]
用js通过递归算法重新排列tempArray 得到dataArray 并循环打印成为select中的option
设为首页
收藏本站
联系我们