ASP做象資源管理器的樹形目錄

2010-08-28 10:45:31來源：西部e網(wǎng)作者：

樹形目錄顯示程序

問題描述：

　　在我們項(xiàng)目中常常會(huì)出現(xiàn)自關(guān)聯(lián)的數(shù)據(jù)表，如果我們從整體看去，整個(gè)表就呈現(xiàn)為一個(gè)樹形數(shù)據(jù)結(jié)構(gòu)（對于復(fù)雜的情況，它可能變成一個(gè)圖）。當(dāng)我們對這個(gè)表進(jìn)行顯示，編輯時(shí)，如果不采用好的表現(xiàn)形式，會(huì)顯得很笨拙，為此，我們開發(fā)這樣的樹形結(jié)構(gòu)的程序。在上一版本中，我們使用的是遞歸算法來實(shí)現(xiàn)，在我們對這個(gè)算法評測時(shí)發(fā)現(xiàn)，對于擁有成千上萬條記錄的數(shù)據(jù)庫就不再能勝任了，所以在新的算法版本中，我們使用了XML技術(shù)，動(dòng)態(tài)的發(fā)現(xiàn)數(shù)據(jù)，以解決一次從服務(wù)器下在大量數(shù)據(jù)的尷尬，同時(shí)也遍免了如果表數(shù)據(jù)結(jié)構(gòu)呈現(xiàn)為圖時(shí)就會(huì)進(jìn)入死循環(huán)的錯(cuò)誤。

　　實(shí)際思路：

　　1、初始顯示時(shí)只顯示根與二級節(jié)點(diǎn)，根與二級節(jié)點(diǎn)同在一層次
　　2、點(diǎn)擊一節(jié)點(diǎn)，如果它的子節(jié)點(diǎn)區(qū)域?qū)ο蟛淮嬖�，則建立對象，同時(shí)下載數(shù)據(jù)更新數(shù)據(jù)，顯示所有子節(jié)點(diǎn)。
　　3、每個(gè)節(jié)點(diǎn)在建立后都就有相同的功能，如檢查子節(jié)點(diǎn)是否存在，顯示隱藏子節(jié)點(diǎn)等等
　　4、 DHTML+XML+ASP+CSS同時(shí)使用

　　技術(shù)難點(diǎn)：

　　1、使用xmlhttp接口時(shí)亂碼問題：
　　因?yàn)樵赼sp輸出頁面中，缺省的編碼方案并不是中文的，那么在客戶端頁面的xmlhttp中解釋時(shí)，就會(huì)以缺省的方案解析，所以就會(huì)出現(xiàn)亂碼。為此，我們在Server端的asp頁面中，加入如下代碼定義編碼方案：

　　Response.CharSet="GB2312"
　　Response.ContentType="text/html"

　　2、如何在界面上保持上一版本的風(fēng)格（類資源管理器形式）：
　　在上一版本中，所有的頁面內(nèi)容都是一氣呵成的，在控制上采用遞歸等思想，所有時(shí)的界面相對友好，當(dāng)時(shí)本版中的機(jī)制發(fā)生了變化，內(nèi)容是有多次合成的關(guān)鍵問題，img ,span 對象的id 如何確定經(jīng)過求證，在界面上，本版本的界面難以與第一界面相同，所以只能保留一部分，但是總體來說，新界面同樣也能滿足需要

　　因?yàn)樵谶@里不好使用附件，所以只能貼源碼了：

　　---xtree.html------

　　</style>
　　</HEAD>
　　<BODY leftMargin=0 rightMargin=0 topMargin=0 border=0>
　　<bold>樹形菜單演示程序</bold><br>
　　<table border=0>
　　<tr><td nowrap>
　　<span id='oSpanroot' border=0></span><SCRIPT LANGUAGE=javascript>createChildNode("root",0);</SCRIPT></td></tr>
　　</table>
　　</BODY>
　　</HTML>

　　-------xtree.asp------------

　　<%@ Language=VBScript %>
　　<%
　　Response.CharSet="GB2312"
　　Response.ContentType="text/html"
　　'''''''''''''''''''''''''''''''Server code start'''''''''''''''''''''''''''''''
　　dim parId,nodeLayer
　　parid=Request.QueryString("parId")
　　nodeLayer=cint(Request.QueryString("nodeLayer"))

　　if(parid="") then
　　Response.Write("root id can't is null")
　　Response.End()
　　end if
　　if(nodeLayer<0) then
　　nodeLayer=0

　　end if
　　%>
　　<%
　　strconn="at"
　　strsql="select * from tree where par='"&parid&"'"

　　''SQL 語句書寫要求：在記錄集的前面三個(gè)字段必須依次為：row_id（惟一的主鍵）、name（菜單條顯示的內(nèi)容）、par_id（父節(jié)點(diǎn)row_id),其它根據(jù)需要輸出與顯示

　　set conn=server.createobject("ADODB.connection")
　　conn.open strconn

　　set rs=server.createobject("ADODB.Recordset")
　　rs.open strsql,conn,3,3

　　i=0
　　dim row_id
　　row_id=""
　　while not rs.EOF
　　row_id=rs.Fields("row_id").Value
　　name=rs.Fields("name").Value
　　j=0

　　while j<nodeLayer
　　Response.Write("<img src='blank.bmp'>")
　　j=j+1
　　wend
　　Response.Write("<img id='objNode"&row_id&"' style='cursor:hand' src='open.bmp' onclick=javascript:createChildNode('"&row_id&"',"&nodeLayer+1&") border=0 align='absmiddle'>")
　　Response.Write("<img src='blank.bmp' border=0 align='absmiddle'>")
　　Response.Write("<a class=item href='view.asp?id="&row_id&"' target='mainFrame'>"&Trim(name)&"</a></br>") '項(xiàng)目內(nèi)容
　　Response.Write("<span id='oSpan"&row_id&"' ></span>") '子節(jié)點(diǎn)內(nèi)容區(qū)域
　　i=i+1
　　rs.MoveNext
　　wend
　　'''''''''''''''''''''''''''''''''''''''''Server Code END ''''''''''''''''''''''''''''''''''
　　%>

　　---------xtree.js-------------

　　function getChildTree(parId,nodeLayer)
　　parId:=父節(jié)點(diǎn)id,nodeLayer:=子節(jié)點(diǎn)所屬層次
　　{
　　var xmlhttp = new ActiveXObject ("Microsoft.XMLHTTP");
　　xmlhttp.Open("get", "xtree.asp?parId="+parId+"&nodeLayer="+nodeLayer, false);
　　xmlhttp.Send("Author:taojianbo;Version:2.0");
　　return xmlhttp.responseText;
　　}

　　function showHide(objid)

　　顯示，隱藏區(qū)域，達(dá)到菜單顯示的目的
　　objid:=區(qū)域?qū)ο驣D的parid部分

　　{
　　var temp;
　　eval("temp=oSpan"+objid+".style.display");
　　if(temp=="block")
　　{

　　eval("oSpan"+objid+".style.display='none'");
　　eval("objNode"+objid+".src='open.bmp'");
　　}
　　else
　　{
　　eval("oSpan"+objid+".style.display='block'");
　　eval("objNode"+objid+".src='close.bmp'");
　　}
　　}//end function

　　function createChildNode(childNodeId,nodeLayer)

　　如果子節(jié)點(diǎn)內(nèi)容為空，則初始化，并更新數(shù)據(jù)

　　childNodeId:=子節(jié)點(diǎn)對象Id的parid部分
　　{
　　var temp;
　　eval("temp=oSpan"+childNodeId+".innerHTML");
　　if(temp=="")
　　{
　　eval("oSpan"+childNodeId+".innerHTML='<div align=right>LOADING...</div><br>'");
　　temp=new String(getChildTree(childNodeId,nodeLayer));
　　if(temp.length!=0)
　　{
　　eval("oSpan"+childNodeId+".innerHTML=temp");
　　eval("objNode"+childNodeId+".src='close.bmp'");//變?yōu)闇p號
　　}
　　else
　　{//如果temp內(nèi)容為空，說明未找到子樹，則該節(jié)點(diǎn)為葉節(jié)點(diǎn)，更改相關(guān)屬性
　　eval("objNode"+childNodeId+".src='leaf.bmp'");//更改圖標(biāo)
　　eval("objNode"+childNodeId+".onclick=''"); 取消click事件
　　eval("oSpan"+childNodeId+".innerHTML=temp");//內(nèi)容為空
　　}
　　}
　　else
　　{ showHide(childNodeId);
　　}
　　}

關(guān)鍵詞：ASP

ASP做象資源管理器的樹形目錄

相關(guān)閱讀: