ASP + XML + JavaScript to implement dynamic infinite-level linkage menu

javascript|xml| Menu | dynamic | linkage MENU

When I do a project, there is a need to do a dynamic infinite level of the linkage menu. Because I am lazy so the Internet to find relevant code, but many did not meet the demand, which has a article is the use of JavaScript to XML file operation to achieve an unlimited level linkage menu, we can combine ASP to complete the reading of database values, and then write XML file, Then read it out with JavaScript and control its linkage.
The key here is to read the N-tier data classes in the database and write them to the XML file correctly:
The structure of my database table is this:
' Tbl_class
Column name data type length description
ClassID int 4 class ID
ModuleID int 4 Module ID
GroupID int 2 identifies a group
ClassName nvarchar 50 category name
ParentID int 2 is connected to a group (0 is the parent class)

' ################################### #我的ASP代码如下 ####################################
' I ignored the code to connect to the database.

' function name: OpenXml (filename)
' entry parameter: filename requires connection or Open XML filename
' return value: XmlDoc is an object that successfully loads an XML document.
' Error printing error message strerror
'------------------------------------------------

Function OpenXml (filename)
Dim strsourcefile, xmldoc,strerror
strsourcefile = filename
Set xmldoc = Server.CreateObject ("Microsoft.XMLDOM")   ' Create xmldom instance
Xmldoc.async = false 
Xmldoc.load ( strSourceFile)
Openxml=xmldoc.parseerror.errorcode
If Xmldoc.parseerror.errorcode<>0 then
Strerror= " 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 ' output error
Else
     set Openxml=xmldoc ' Return instance
End If
End function

'------------------------------------------------
' Function name: Closexml ()
' Parameter: XmlDoc XML component Instance
'------------------------------------------------
function Closexml (xmldoc)
If IsObject (xmldoc) Then
Set xmldoc=nothing
End If
End Function

'------------------------------------------------
' Function name: Selectxmlnode
' Parameter: XmlDoc XML component Instance
' e element's name
' Returns an element instance
'------------------------------------------------
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) ' opens XML
Removeallnodes xmldoc, "root" clears root and the subkeys below it, so that it can be easily read and written
Set root= xmldoc.createelement ("root")
Xmldoc.appendchild Root ' creates a top-level element
Sql= "select Max (GroupID) from Tbl_class" read the largest level
Set Rs=cn.execute (SQL)
If IsNull (RS (0)) then Maxgroup=0 else maxgroup=rs (0) ' If NULL indicates no data
S= "": ss= ""
Set Nt=xmldoc.createelement ("item")
Nt.setattribute "text", "Please select"
Root.appendchild nt ' Create an element
For I=1 to Maxgroup ' Start loop
Sql= "SELECT * from Tbl_class where groupid=" & I "read from bottom to top level
Set Rs=cn.execute (SQL)
Torf=false ' Create a "Please select" Null for each layer.
Do While rs.eof =false ' starts reading the underlying data
Set n = xmldoc.createelement ("Item" & RS ("ClassID")) ' Create a markup element named Item + ID number
N.setattribute "Text", RS ("ClassName") ' sets its property ' text ' to the database table

ClassName
N.setattribute "Value", RS ("ClassID") ' sets its property ' value ' to the database table

ClassID
If RS ("ParentID") >0 then ' is an upper-level data
Set Np=selectxmlnode (xmldoc, "Item" & RS ("ParentID")) ' reads its upper-layer data element first and saves it in NP
If torf=false the n ' If Torf is a value of false
Set Nt=xmldoc.createelement ("item") ' Creates an element to save in NT
Nt.setattribute "Text", "select" To set its Text property to "please select"
Np.appendchild NT ' NP adds it as a child element
End If
Torf=true ' Set True
Np.appendchild N ' NP adds n as a child element
Else
Root.appendchild N ' If it's the first level of data, add it as a child element under root
End If
Rs.movenext ' next pointer
Loop

Ss=ss & "<select id=select" & I & "Width=1 ></SELECT></span>" ' Create one on each level

<select>
S=s & ", ' Select ' & I & '" ' Saves the ID of each <select> in the variable s, which is in the format: ID1,ID2,ID3,ID4

Next
Xmldoc.save filename ' official save XML file
Closexml xmldoc ' Close XML file


Response.Write SS ' Direct <select> output to document
S=mid (s,2)

Call xmlselect.js within the HTM file
<script language=javascript src= "Xmlselect.js" ></SCRIPT>
<script language=javascript>
<!--//** Power by Fason
function init () {
var Sel = [<%=s%>];
Attachselect ("Demo.xml", sel,["forum Navigation"]);
};//-->
</SCRIPT>
Init ();

######## #我把它的JS代码贴出来, the author is called: Buforshin, http://fason.nease.net/samples/xmlselect/Here are examples and code.

-----------------------------xmlselect.js file Start-------------------------------

//-----------------------------------------------------/
Nichname:fason
Autho:forbes Pu (Buforshin)
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]);
&NBSP
 if (!oxml) {throw new Error (' Not support!\nplease install a XML parser ');
 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) {
&nbs p;  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! ');
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 file End-------------------------------

Because XML is simple and straightforward to operate, it is handy to use.

I only know some of the knowledge of the fur of XML, if there are errors please point out. I don't think there's much to know about XML and so on, but it's enough to satisfy our use.

Thank Buforshin here for providing us with such excellent JS code.