网页功能: 加入收藏 设为首页 网站搜索  
Javascript无限分类算法的实现
发表日期:2005-10-22作者:[转贴] 出处:blueidea  

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

我来说两句】 【加入收藏】 【返加顶部】 【打印本页】 【关闭窗口
中搜索 Javascript无限分类算法的实现
本类热点文章
  微软将永久改变IE渲染多媒体的方式
  制作Javascript弹出窗口技巧九则
  弹出网页窗口全攻略(html/hta)
  JavaScript打造网页右键菜单二法
  身份证号码查询
  全国省市县无刷新多级关联菜单
  仿windows登陆条
  Javascript无限分类算法的实现
  译自MSDN非常详细的IMG,IFRAME的属性参..
  让你的网页更精彩 - Javascript 调用MS..
  用JavaScript加密保护网站页面
  用JScript实现公历到农历的日期转换
最新分类信息我要发布 
最新招聘信息

关于我们 / 合作推广 / 给我留言 / 版权举报 / 意见建议 / 广告投放  
Copyright ©2003-2019 Lihuasoft.net webmaster(at)lihuasoft.net
网站编程QQ群   京ICP备05001064号 页面生成时间:0.00439