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","Microso

本文作者:



相关阅读:
Linux操作系统安全配置步骤
PHP教程:配置smarty开发环境
javascript 命名规则 变量命名规则
jquery.validate分组验证代码
安全问题:编写安全的PHP代码
LNMP一键安装包PHP和Niginx 文件上传大小限制问题解决方法
选择mootools的5个原因
CSS中如何调整行距,字距
PHP+MySQL教程(5):MySQL Select
ASP去掉字符串头尾连续回车和空格的Function
dedecms 制作模板中使用的全局标记图文教程
Oracle的exp备份机搭建步骤
linux指针函数追踪方法
巧妙使用JQuery Clone 添加多行数据,并更新到数据库的实现代码
快速导航

Copyright © 2016 phpStudy |