ASP + XML + javascript 實現動態無限級聯動菜單

我做某個項目時，有需求的是做一個動態的無限級的聯動菜單。由于本人比較懶于是上網找找有關的代碼，但很多都沒有滿足需求，其中有一編文章是用JavaScript對XML文件操作來實現無限級聯動菜單的，我們可結合ASP來完成對數據庫值的讀取，然后寫入XML文件，再用JavaScript讀出來并且控制它的聯動。
這兒的關鍵是把數據庫內的N層數據類讀出來：
我的數據庫表結構是這樣的:
‘’tbl_Class
列名 數據類型 長度 說明
ClassID int 4 類ID
ModuleID int 4 模塊ID
GroupID int 2 標識一個組
ClassName nvarchar 50 類別名稱
ParentID int 2 連接到組(0表示是父類)


‘’####################################我的ASP代碼如下##########################################
‘’我把連接數據庫的代碼忽略。


‘’函數名字：OpenXml(FileName)
‘’入口參數: filename 需要連接或打開的xml文件名
‘’返回值 ：XmlDoc就是一個成功裝載XML文檔的對象了。
‘’ 有錯誤則打印錯誤信息strError
‘’------------------------------------------------

function OpenXml(filename)
dim strSourceFile ,XmlDoc,strError
strSourceFile = filename
Set XmlDoc = Server.CreateObject("Microsoft.XMLDOM") ‘’創建XMLDOM實例
XmlDoc.async = false
XmlDoc.load(strSourceFile)
OpenXml=XmlDoc.parseerror.errorcode
if XmlDoc.parseerror.errorcode<>0 then
strError="<h2>error"&XmlDoc.parseerror.errorcode&"</h2>"
strError=strError&XmlDoc.parseerror.reason&"<br>"
strError=strError&XmlDoc.parseerror.url&"<br>"
strError=strError&XmlDoc.parseerror.line&"<br>"
strError=strError&XmlDoc.parseerror.filepos&"<br>"
strError=strError&XmlDoc.parseerror.srcText&"<br>"
response.write strError ‘’輸出錯誤
else
set OpenXml=XmlDoc ‘’返回實例
end if
end function


‘’------------------------------------------------
‘’函數名字：CloseXml()
‘’參數: XmlDoc XML組件實例
‘’------------------------------------------------
function CloseXml(XmlDoc)
if IsObject(XmlDoc) then
set XmlDoc=nothing
end if
end function


‘’------------------------------------------------
‘’函數名字：SelectXmlNode
‘’參數:XmlDoc XML組件實例
‘’　　 e 元素的名字
‘’返回元素實例
‘’------------------------------------------------
function SelectXmlNode(XmlDoc,e)
dim n

set n=XmlDoc.selectSingleNode("//" & e )
set selectXmlNode= n

end function


Dim n,np,MaxGroup,root,xmlDoc,nt,filename,s,ss,TorF
filename=server.mappath("demo.xml")
set xmlDoc=openXML(filename)‘’打開XML
RemoveAllNodes xmlDoc,"Root"‘’把Root和它下面的子項清除，這樣可以多次方便讀寫
set root= xmlDoc.createElement("Root")
xmlDoc.appendChild root‘’創建一個頂層元素
sql="select Max(GroupID) from tbl_Class " ‘’讀出最大的層次
set rs=cn.execute(sql)
if isnull(rs(0)) then MaxGroup=0 else MaxGroup=rs(0)　‘’如果為null 表示沒有數據
s="":ss=""
set nt=xmldoc.createElement("item")
nt.setAttribute "text", "請選擇"
root.appendChild nt ‘’創建一個元素
for i=1 to MaxGroup ‘’開始循環
sql="select * from tbl_Class where GroupID=" & i ‘’由底層向頂層讀取
set rs=cn.execute(sql)
TorF=False ‘’為了每一個層上都創建一個“請選擇”的空取。
do while rs.eof =false ‘’開始讀取下層的數據
Set n = xmlDoc.createElement("item" & rs("ClassID")) ‘’創建一個命名為item + ID號的標記元素
n.setAttribute "text",rs("ClassName")‘’把它的屬性“text”設置為數據庫表內的

ClassName
n.setAttribute "value",rs("ClassID")‘’把它的屬性“value”設置為數據庫表內的

ClassID
if rs("ParentID")>0 then ‘’是有上層數據的
set np=selectXmlNode(xmlDoc,"item" & rs("ParentID")) ‘’把它的上層數據元素先讀出保存在np
if TorF=false then ‘’如果TorF為False值時
set nt=xmldoc.createElement("item") ‘’創建一個元素保存在nt
nt.setAttribute "text", "請選擇"‘’把它的text屬性設置為“請選擇”
np.appendChild nt ‘’np把它加為子元素
end if
TorF=true ‘’設置true
np.appendChild n ‘’np 把n加為子元素
else
root.appendChild n ‘’如果是第一層數據就把它加入為root下的一個子元素
end if
rs.movenext ‘’下一條指針
loop

ss=ss & "<SELECT id=Select" & i & " width=1 ></SELECT></span>" ‘’每有一層就創建一個

<select>
s=s & ",‘’Select" & i & "‘’" ‘’把每個<select>的id 保存在變量s，它的格式為：id1,id2,id3,id4

next
xmlDoc.save filename ‘’正式保存Xml文件
CloseXml xmlDoc ‘’關閉Xml文件


response.write ss ‘’直接把<select>輸出到文檔
s=mid(s,2)



//在HTM文件內調用xmlselect.js
<SCRIPT language=JavaScript src="xmlselect.js"></SCRIPT>
<SCRIPT language=JavaScript>
<!--//** power by fason
function init() {
var Sel = [<%=s%>];
attachSelect("demo.xml", Sel,["論壇導航"]);
};//-->
</SCRIPT>
init();




//#########我把它的JS代碼貼出來，作者叫：蒲佛信，http://fason.nease.net/samples/xmlselect/這兒有示例和代碼。

//-----------------------------xmlselect.js文件開始-------------------------------

//-----------------------------------------------------/
// NichName :fason
// Autho :Forbes Pu(蒲佛信)
// Email :fason_pfx@hotmail.com
// HomePage :http://fason.nease.net
// Blog :http://blog.mvpcn.net/fason/
// http://blog.csdn.net/fason/
//
// function :attachSelect(sXMLSrc, aSel[, sStore])
// param1 :sXMLSrc(URL of XML data source)
// param2 :aSel(array of SELECT controls‘’s ID)
// param3 :array of default value when display
//-----------------------------------------------------/


function attachSelect(sXMLSrc, aSel, sStore) {
var oXML = CreateXmlDocument();
var oDocument = null;
var store = sStore ? sStore : [];
var Sel = new Array();

for (var i=0; i<aSel.length; i++)
Sel[i] = document.getElementById(aSel[i]);

if (!oXML){ throw new Error(‘’Not support!\nplease install a XML parser‘’);return; }
oXML.onreadystatechange = function () {
if (oXML.readyState == 4) {
attachXML();
}
};
oXML.load(sXMLSrc);

function CreateXmlDocument() {
if (document.implementation && document.implementation.createDocument) {
var doc = document.implementation.createDocument("", "", null);
if (doc.readyState == null) {
doc.readyState = 1;
doc.addEventListener("load", function () {
doc.readyState = 4;
if (typeof doc.onreadystatechange == "function")
doc.onreadystatechange();
}, false);
}
return doc;
}
else if (window.ActiveXObject) {
var prefix = ["MSXML3","MSXML2","MSXML","Microsoft"];
for (var i=0;i<prefix.length;i++) {
try {
var doc = new ActiveXObject(prefix[i] +

".DomDocument");
doc.setProperty("SelectionLanguage","XPath");
return doc;
} catch (e) {}
}
}
return null;
};

function attachXML() {
oDocument = oXML.documentElement;
if (!oDocument) { throw new Error(‘’No XML data!‘’); return; }
for (var i=0;i<aSel.length-1;i++){
addEvent(Sel[i], "onchange", function(x) {
return function () { doChange(x); }
}(i+1));
}
doChange(0);
};

function selectXMLNode(x) {
var sPath = "/*";
var oDoc = oDocument;
for (var i=0;i<x;i++)
sPath += "/*[" + (Sel[i].selectedIndex+1) + "]";
if (typeof(oDoc.selectSingleNode)!=‘’undefined‘’) return

oDoc.selectSingleNode(sPath);
else {
var doc=oDoc.nodeType==9?oDoc:oDoc.ownerDocument;
var res = doc.createNSResolver(oDoc.nodeType==9?

oDoc.documentElement:oDoc);
return doc.evaluate(sPath,oDoc, res, 9, null).singleNodeValue;
}
};

function addEvent(el, sHandler, fnc) {
if (el.attachEvent) {
el.attachEvent(sHandler, fnc);
} else if (el.addEventListener) {
el.addEventListener(sHandler.replace(/on/i, ‘’‘’), fnc, false);
} else {
el[sHandler] = fnc;
}
};

function doChange(n) {
var el = selectXMLNode(n);
var nodes = el ? el.childNodes :[];
var s = Sel[n];
var f = 0;
if (nodes.length>0) {
with (s){
length = 0;
for (var i = 0,j = 0;i<nodes.length;i++) {
if (nodes[i].nodeType!=1)continue;
var t = nodes[i].getAttribute("text");
var v = nodes[i].getAttribute("value") ? nodes

[i].getAttribute("value") : t;
if (v == store[n]) f = j;
options[j++] = new Option(t, v);
}
options[f].selected = true;
}
if (++n<Sel.length) doChange(n);
} else {
for (var i=n; i<Sel.length; i++) {
with (Sel[i]) {
length = 0;
options[0] = new Option(‘’--‘’);
options[0].selected = true;
}
}
}
};
};

//-----------------------------xmlselect.js文件結束-------------------------------

由于Xml的操作簡便直接，使用起來得心應手。

本人只知一些XML的皮毛知識，如有錯誤請大家指出。我認為不用什么去了解XML等好多的專業知識，但可以滿足我們使用就已經足夠了。

在此感謝蒲佛信為我們提供這么優秀的js代碼.

原文轉自：http://www.kjueaiud.com