Javascript无限分类算法的实现

来源：天极网作者：出处：巧巧读书 2005-12-06 进入讨论组

通过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打开： http://www.qqread.com/jsp/w462138201.html 进入讨论组讨论。

【深度阅读】相关文章

【收藏此文】【大中小】【打印】【关闭】

较早的文章：一个用JSP实现的分页的类及调用方法

较新的文章：如何使用 velocity 模板引擎开发网站

Javascript无限分类算法的实现

相关专题

讨论组问题推荐

站内各频道最新更新文档

形形色色的台湾特产

怀念“黛玉”妹妹

站内最新制作专题

阳春三月境内境外赏花忙

运动促前第二次发育

热门关键字导读

站内频道文章精选

新闻资讯

操作系统

桌面开发

数据库

电脑技巧

常用软件

网络程序开发

图像处理

Javascript无限分类算法的实现

相关专题

讨论组问题推荐

站内各频道最新更新文档

形形色色的台湾特产

怀念“黛玉”妹妹

站内最新制作专题

阳春三月 境内境外赏花忙

运动促前第二次发育

热门关键字导读

站内频道文章精选

新闻资讯

操作系统

桌面开发

数据库

电脑技巧

常用软件

网络程序开发

图像处理

阳春三月境内境外赏花忙