無限分類演算法 js 的實現

來源:互聯網
上載者:User
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



相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

Starter Package

SSD Cloud server and data transfer for only $2.50 a month

Get Started >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。