Javascript无限分类算法的实现

javascript|算法

通过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>
服务器端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

时间： 2024-09-30 07:14:52

Javascript无限分类算法的实现的相关文章

一棵php的类树(支持无限分类)_php基础

最近问无限分类的类树问题比较多,所以一高兴自己写了一个,我刚写完的,大家用用看,看看怎么实现起来更快,更简单,把你的树也贴出来(要只查询一次数据库的)<br>  这是一棵分类列表的类树,  支持无限分类<br>  一个分类下面可以同时有"包含子类的分类"和"最终分类";<br>  唯一的优点是*****只需要进行一次的数据库*****查询.<br>  样子不是很好看,不过可以自定义修改,可以自己定义css加里面<

Asp.Net实现无限分类生成表格的方法(后台自定义输出table)_实用技巧

本文实例讲述了Asp.Net实现无限分类生成表格的方法.分享给大家供大家参考,具体如下: 数据结构 monitor_group monitor_grp_id      monitor_grp_name     parent_id       level               childCount       orderby [int,自动递增]           [nvarchar,not null]      [int,not null]  [int,not null]   [int,

php 多种无限分类实例

创建数据库教程以及表: CREATE DATABASE `sortclass`DEFAULT CHARSET utf8; CREATE TABLE IF NOT EXISTS `class` ( `cid` mediumint(8) unsigned NOT NULL auto_increment, `pid` mediumint(8) unsigned NOT NULL, `cname` varchar(50) NOT NULL, PRIMARY KEY (`cid`), KEY `pid`

php+mysql数据库实现无限分类的方法_php技巧

本文实例讲述了php+mysql数据库实现无限分类的方法.分享给大家供大家参考.具体分析如下: 这款php无限分类代码比较完整理包括了数据库是mysql的,有增加.删除.编辑.移动的功能,同时还提供数据库sql表结构.代码如下: 复制代码 代码如下: //连接数据库 $link = mysql_connect('localhost','root','') or die(mysql_error()); mysql_select_db('class',$link)or die(mysql_error

c++-C++计算哈密尔顿回路的优化算法的实现？请各位高手都来帮帮忙吧

问题描述 C++计算哈密尔顿回路的优化算法的实现?请各位高手都来帮帮忙吧 C++计算哈密尔顿回路的优化算法的实现?请各位高手都来帮帮忙吧 解决方案 http://wenku.baidu.com/link?url=Aue42qZXYxiqlYt5WJJ-rMyFkotcIy501YzLF2V1Eww1j17n7myWEj0Z7bNIPYZcqsmlBf9UMqfGRmn5Z6E3iHliGQaJPCLBnpG7pilNmVm

一棵php的类树(支持无限分类)

最近问无限分类的类树问题比较多,所以一高兴自己写了一个,我刚写完的,大家用用看,看看怎么实现起来更快,更简单,把你的树也贴出来(要只查询一次数据库的)<br> 这是一棵分类列表的类树, 支持无限分类<br> 一个分类下面可以同时有"包含子类的分类"和"最终分类";<br> 唯一的优点是*****只需要进行一次的数据库*****查询.<br> 样子不是很好看,不过可以自定义修改,可以自己定义css加里面<br>

JavaScript语句分类大全

核心提示:JavaScript语句分类大全 1.赋值语句:var 2.return语句 3.条件分支语句 if...else,switch 4.循环语句 for,for...in,while,break,continue. 5.对象操作语句with,new,delete,this 6.注释语句 7.函数定义语句:function,return 1.变量声明赋值语句:var var语句声明了一个变量的名称,同时也可以让这个变量具有一个初始值. 如果var语句在一个函数中声明变量,则这个变量的有效区

php无限分类, 支持输出树状图

<?php /** * 通用的树型类,可以生成任何树型结构 */ class tree { /** * 生成树型结构所需要的2维数组 * @var array */ var $arr = array(); /** * 生成树型结构所需修饰符号,可以换成图片 * @var array */ var $icon = array('│','├','└'); /** * @access private */ var $ret = ''; /** * 构造函数,初始化类 * @param array 2维

PHP无限分类-PHP100代码篇

  <?php  //无限分类,从子类找所有父类 //$id 子类ID  function php100_xd($id){    $sql="select * from fl where id='$id'";    $q=mysql_query($sql);    $rs=mysql_fetch_array($q);    $rs['fid']==0 ? "" : fl($rs['fid']);    echo $rs['name']."-"