ASP + XML + JavaScript 实现动态无限级联动菜单

结合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="

1<h2>error"&amp;XmlDoc.parseerror.errorcode&amp;"</h2>

"
strError=strError&XmlDoc.parseerror.reason&"

1<br/>

"
strError=strError&XmlDoc.parseerror.url&"

1<br/>

"
strError=strError&XmlDoc.parseerror.line&"

1<br/>

"
strError=strError&XmlDoc.parseerror.filepos&"

1<br/>

"
strError=strError&XmlDoc.parseerror.srcText&"

1<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 & "

1<select "="" &="" i="" id='Select"' width="1"></select>

" '每有一层就创建一个

 1<select>   
 2s=s &amp; ",'Select" &amp; i &amp; "'" '把每个<select>的id 保存在变量s，它的格式为：id1,id2,id3,id4   
 3  
 4next   
 5xmlDoc.save filename '正式保存Xml文件   
 6CloseXml xmlDoc '关闭Xml文件   
 7  
 8  
 9response.write ss '直接把<select>输出到文档   
10s=mid(s,2) 
11
12//在HTM文件内调用xmlselect.js   
13<script language="JavaScript" src="xmlselect.js"></script>
14<script language="JavaScript">   
15<!--//** power by fason   
16function init() {   
17var Sel = [```
18=s
19```];   
20attachSelect("demo.xml", Sel,["论坛导航"]);   
21};//-->   
22</script>   
23init(); 
24
25  
26//#########我把它的JS代码贴出来，作者叫：蒲佛信，http://fason.nease.net/samples/xmlselect/这儿有示例和代码。 
27
28//-----------------------------xmlselect.js文件开始------------------------------- 
29
30//-----------------------------------------------------/   
31// NichName :fason   
32// Autho :Forbes Pu(蒲佛信)   
33// Email :[email protected]   
34// HomePage :http://fason.nease.net   
35// Blog :http://blog.mvpcn.net/fason/   
36//  http://blog.csdn.net/fason/    
37//   
38// function :attachSelect(sXMLSrc, aSel[, sStore])   
39// param1 :sXMLSrc(URL of XML data source)   
40// param2 :aSel(array of SELECT controls's ID)   
41// param3 :array of default value when display   
42//-----------------------------------------------------/ 
43
44  
45function attachSelect(sXMLSrc, aSel, sStore) {   
46var oXML = CreateXmlDocument();   
47var oDocument = null;   
48var store = sStore ? sStore : [];   
49var Sel = new Array(); 
50
51for (var i=0; i<asel.length; "",="" ".domdocument");="" "]";="" "onchange",="" &&="" ''),="" (!odocument)="" (!oxml){="" ()="" (doc.readystate="null)" (document.implementation="" (e)="" (el.addeventlistener)="" (el.attachevent)="" (nodes.length="" (oxml.readystate="4)" (sel[i].selectedindex+1)="" (typeof="" (typeof(odoc.selectsinglenode)!="undefined" (var="" (window.activexobject)="" )="" +="" 9,="" :[];="" ;="" ?="" a="" activexobject(prefix[i]="" addevent(el,="" addevent(sel[i],="" attachxml()="" attachxml();="" catch="" createxmldocument()="" data!');="" doc="oDoc.nodeType==9?oDoc:oDoc.ownerDocument;" doc.addeventlistener("load",="" doc.evaluate(spath,odoc,="" doc.onreadystatechange="function" doc.onreadystatechange();="" doc.readystate="4;" doc.setproperty("selectionlanguage","xpath");="" doc;="" dochange(0);="" dochange(n)="" dochange(x);="" document.implementation.createdocument)="" el="selectXMLNode(n);" el.addeventlistener(shandler.replace(="" el.attachevent(shandler,="" el.childnodes="" el[shandler]="fnc;" else="" error('no="" error('not="" f="0;" false);="" fnc)="" fnc);="" fnc,="" for="" function="" function(x)="" i="0;i&lt;x;i++)" i++)="" i,="" if="" install="" new="" nodes="el" null).singlenodevalue;="" null);="" null;="" odoc="oDocument;" odoc.documentelement:odoc);="" odoc.selectsinglenode(spath);="" odocument="oXML.documentElement;" on="" oxml.load(sxmlsrc);="" oxml.onreadystatechange="function" parser');return;="" prefix='["MSXML3","MSXML2","MSXML","Microsoft"];' res="doc.createNSResolver(oDoc.nodeType==9?" res,="" return="" return;="" s="Sel[n];" sel[i]="document.getElementById(aSel[i]);" selectxmlnode(x)="" shandler,="" spath="" support!\nplease="" throw="" try="" var="" xml="" {="" {}="" }="" }(i+1));="" },="" };="">0) {   
52with (s){   
53length = 0;   
54for (var i = 0,j = 0;i&lt;nodes.length;i++) {   
55if (nodes[i].nodeType!=1)continue;   
56var t = nodes[i].getAttribute("text");   
57var v = nodes[i].getAttribute("value") ? nodes 
58
59[i].getAttribute("value") : t;   
60if (v == store[n]) f = j;   
61options[j++] = new Option(t, v);   
62}   
63options[f].selected = true;   
64}   
65if (++n&lt;Sel.length) doChange(n);   
66} else {   
67for (var i=n; i&lt;Sel.length; i++) {   
68with (Sel[i]) {   
69length = 0;   
70options[0] = new Option('--');   
71options[0].selected = true;   
72}   
73}   
74}   
75};   
76}; 
77
78//-----------------------------xmlselect.js文件结束------------------------------- 
79
80由于Xml的操作简便直接，使用起来得心应手。   
81转自： http://goaler.xicp.net/ShowLog.asp?ID=426</asel.length;></select></select></select>
Published At
Categories with Web编程
Tagged with
comments powered by Disqus