成都网站建设
|
域名注册
|
虚拟主机
|
网站制作
|
网站案例
|
网站优化
|
网站推广
|
企业邮局
|
服务器租用
|
广告设计
首页
域名注册
虚拟主机
网站建设
服务器租用
营销推广
网站程序
前端开发
移动互联网
企业邮箱
广告设计
|
成都VI设计
|
画册设计制作
|
成都包装设计
|
网页设计
|
成都虚拟主机
|
网站建设
|
营销型网站建设
前端开发
html
div+css
css
jQuery
JavaScript教程
ajax教程
XML教程
json教程
bootstrap教程
域名注册
英文域名
中文域名
域名转入\转出
通用网址
无线网址
虚拟主机
主机购买
数据库
主机管理
FTP上传
主机续费升级
网站建设
网站策划
网站方案
网页设计
网站制作
网站改版
服务器租用
web服务器
FTP服务器
服务器租用
服务器托管
云主机服务器
营销推广
seo优化
网站推广
搜索引擎
免费资源
网站程序
vb编程
asp程序
php程序
asp.net程序
C#程序
移动互联网
wap手机网站
app应用开发
微网站
企业邮箱
企业邮箱优势
企业邮箱设置
邮箱收发问题
邮箱功能讲解
邮箱其他问题
网站备案
备案流程指南
备案资料下载
备案常见问题
各省备案要求
当前位置:
创新互联
>>
常见问题
>>
前端开发
>>
JavaScript教程
>>
Javascript无限分类算法的实现
Javascript无限分类算法的实现
作者:创新互联 文章来源:前端开发部 点击数:
更新时间:2008-03-25
通过
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]="|_@1@_!_#_|_@test@_!_#_|_@0" data-ke-src="mailto:0@_!_#_$_|_@1@_!_#_$_|_@test@_!_#_$_|_@0" ;tempArray[6]="2@_!_#_$_|_@7@_!_#_$_|_@sss@_!_#_$_|_@2" ;tempArray[5]="2@_!_#_$_|_@6@_!_#_$_|_@aaa@_!_#_$_|_@2" ;tempArray[4]="4@_!_#_$_|_@5@_!_#_$_|_@test5@_!_#_$_|_@1" ;tempArray[3]="0@_!_#_$_|_@4@_!_#_$_|_@test@_!_#_$_|_@0" ;tempArray[2]="2@_!_#_$_|_@3@_!_#_$_|_@test1-test2@_!_#_$_|_@2" ;tempArray[1]="1@_!_#_$_|_@2@_!_#_$_|_@test1@_!_#_$_|_@1">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>
服务器
端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+=" ";
}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>
讲解:
asp
查询
数据库
,生成js数据 object(不是数组,类似)
数据库不同的行,对应不同的 tempArray[0] tempArray[1]......
不同字段在每条数据中通过"@_!_#_$_|_@"分割,以避免会与数据中的文本有重复。
用js通过递归算法重新排列tempArray 得到dataArray 并循环打印成为select中的option
javascript表单之间的数据传递
:上一篇
没有了!
:下一篇
JavaScript教程相关文章
javascript表单之间的数...
JavaScript实用技巧集锦
用Javascript轻松制作抽...
一个简单的javascript菜...
创新互联专业网站设计制作、网站建设、UI设计、网页设计。欢迎咨询028-86922220
网站备案
|
企业邮箱
|
移动互联网
|
前端开发
|
网站程序
|
营销推广
|
服务器租用
|
网站建设
|
虚拟主机
|
域名注册
|
热门搜索
服务电话:028-86922220 13518219792 公司地址:成都市太升南路288号锦天国际A幢10楼2号
企业邮箱:
service@cdxwcx.com
版权所有:成都创新互联科技有限公司 蜀ICP备09010846号
成都网站建设