js|算法
通过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+=" ";}else{xx+=" ◇";}}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>
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
服务器端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 sqlSet rs=server.createobject("adodb.recordset")sql="select * from fenlei"rs.open sql,conn,1,1dim xx=0do while not rs.eofresponse.write "tempArray[" & x & "]=""" &rs("fl") & "@_!_#_$_|_@" &rs("id") & "@_!_#_$_|_@" & rs("mc") & "@_!_#_$_|_@" & rs("ceng") & """;"x=x+1rs.movenextloop%>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+=" ";}else{xx+=" ◇";}}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>
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
讲解:
asp 查询数据库,生成js数据 object(不是数组,类似)
数据库不同的行,对应不同的 tempArray[0] tempArray[1]......
不同字段在每条数据中通过"@_!_#_$_|_@"分割,以避免会与数据中的文本有重复。
用js通过递归算法重新排列tempArray 得到dataArray 并循环打印成为select中的option