Code of the client generation tree

Index. asp file, called code
<Script language = "javascript" type = "text/javascript" src = "dhATV. js"> </script>
<Script language = "javascript" type = "text/javascript">
Function vc (cs ){
Window. open ('test. asp? Classid = '+ cs );
}
</Script>

<Script language = "javascript" type = "text/javascript">
// Define an object instance
Var dhATV = new dhAjaxTreeView ();
// Return object instance name
DhATV. treeTagName = "dhATV ";
// Set the root node text
DhATV. rootText = "online education system ";
// Set the node text size
DhATV. textsize = "12px ";
// Set the icon folder
DhATV. icoFolder = "folder ";
// Set the request address
DhATV. postUrl = "getMenu. asp? Menuid = 0 ";
// Set node events
DhATV. nodeEvent = function (cs) {vc (cs );}
// Load the root node
DhATV. setup (document. getElementById ("tree "));
</Script>

The following is the dhATV. js code. You can see where to change the code to implement the desired function.
/** Mozilla is compatible with MsIE scripts and stylesheet extensions.
* O stylesheet. addRule ()
*/
(Function (){
If (! Window. CSSStyleSheet) return;
Function _ ss_GET_rules _(){
Return this.css Rules;
}
Var _ ss = CSSStyleSheet. prototype;
_ Ss. addRule = function (sSelector, sRule ){
This. insertRule (sSelector + "{" + sRule + "}", this.css Rules. length );
}
_ Ss. _ defineGetter _ ("rules", _ ss_GET_rules _);
})();

Function dhAjaxTreeView (){
// Author: dh20156
Var dh = this;
// Define the Instance name
This. treeTagName = null;
// Define the node icon folder
This. icoFolder = "folder ";
// Define the root node text
This. rootText = "Root ";
// Define the node text size
This. textsize = "12px ";
// Define the request address
This. postUrl = "getMenu. asp? Menuid = ";
// Define a node event specified by the client
This. nodeEvent = function (cs) {alert (cs );};
// Define the currently selected node
Var selectedflag = null;
// Click a node event
This. clickNode = function (obj ){
Var otype = obj. className;
Otype = otype. toLowerCase ();
If (otype! = "Childvalue" & otype! = "Lastvalue "){
Var ocsd = obj. childNodes [4]. style. display;
Ocsd = "block "? This. hideNode (obj): this. showNode (obj );
} Else {
Var fid = obj. getAttribute ("fid ");
This. nodeEvent (fid );
}
}
// Close the node
This. hideNode = function (obj ){
Obj. childNodes [4]. style. display = "none ";
This. setIcon (obj, "close ");
}
// Expand a node
This. showNode = function (obj, otype ){
Obj. childNodes [4]. style. display = "block ";
Var nl = obj. childNodes [4]. childNodes. length;
If (nl = 0 ){
This. getNode (obj );
}
This. setIcon (obj, "open ");
}
// Set the node Style
This. setIcon = function (obj, com ){
Var rootIconOpen0 = this. icoFolder + "/dashminus.gif ";
Var rootIconClose0 = this. icoFolder + "/dashplus.gif ";
Var nodeIconOpen0 = this. icoFolder + "/tminus.gif ";
Var nodeIconClose0 = this. icoFolder + "/tplus.gif ";
Var nodeIconOpen1 = this. icoFolder + "/No. GIF ";
Var nodeIconClose1 = this. icoFolder + "/nc.gif ";
Var lnodeIconOpen0 = this. icoFolder + "/lminus.gif ";
Var lnodeIconClose0 = this. icoFolder + "/lplus.gif ";

Var otype = obj. className;
Otype = otype. toLowerCase ();
Switch (otype ){
Case "root ":
If (com = "open "){
Obj. childNodes [0]. src = rootIconOpen0;
} Else {
Obj. childNodes [0]. src = rootIconClose0;
}
Break;
Case "childnode ":
If (com = "open "){
Obj. childNodes [0]. src = nodeIconOpen0;
Obj. childNodes [1]. src = nodeIconOpen1;
} Else {
Obj. childNodes [0]. src = nodeIconClose0;
Obj. childNodes [1]. src = nodeIconClose1;
}
Break;
Case "lastnode ":
If (com = "open "){
Obj. childNodes [0]. src = lnodeIconOpen0;
Obj. childNodes [1]. src = nodeIconOpen1;
} Else {
Obj. childNodes [0]. src = lnodeIconClose0;
Obj. childNodes [1]. src = nodeIconClose1;
}
Break;
Default: break;
}
}
// Initialize XMLHTTPREQUEST
This. ajaxInitRV = function (){
Try {
ReqRV = new ActiveXObject ("Msxml2.XMLHTTP ");
} Catch (e ){
Try {
ReqRV = new ActiveXObject ("Microsoft. XMLHTTP ");
} Catch (oc ){
ReqRV = null;
}
}

If (! ReqRV & typeof XMLHttpRequest! = "Undefined "){
ReqRV = new XMLHttpRequest ();
}

Return reqRV;
}
// Load the node
This. getNode = function (obj ){
Var ajaxRV = null;
Var reqRV = this. ajaxInitRV ();
Var fid = obj. getAttribute ("fid ");
Var url = this. postUrl + fid;
Obj. childNodes [4]. innerHTML = "<div> loading... </div> ";
If (reqRV! = Null ){
ReqRV. onreadystatechange = function (){
If (reqRV. readyState = 4 ){
If (reqRV. status = 200 ){
AjaxRV = reqRV. responseText;
AjaxRV = unescape (ajaxRV );
AjaxRV = ajaxRV. replace (/\ [dhATV \]/ig, dh. treeTagName );
AjaxRV = ajaxRV. replace (/\ [dhfolder \]/ig, dh. icoFolder );
Obj. childNodes [4]. innerHTML = ajaxRV;
ReqRV = null;
} Else {
// Failed
Obj. childNodes [4]. innerHTML = "";
}
}
}
// Asynchronous loading
ReqRV. open ("POST", encodeURI (url), true );
ReqRV. send (null );
}
}
// Object Instantiation
This. setup = function (obj ){
If (typeof document. styleSheets = "undefined" | document. styleSheets! = "OBJECT "){
Var styleObj = document. createElement ("STYLE ");
Document. getElementsByTagName ("HEAD") [0]. appendChild (styleObj );
}
Var oStyleSheet = document. styleSheets [0];
OStyleSheet. addRule (". root", "margin: 0px ;");
OStyleSheet. addRule (". root *", "font-size:" + this. textsize + ";");
OStyleSheet. addRule (". root div", "margin-left: 17px; white-space: nowrap ;");
OStyleSheet. addRule (". childnode", "background: url (" + this. icoFolder + "/I .gif) left top repeat-y ;}");
OStyleSheet. addRule (". childvalue", "background: url (" + this. icoFolder + "/I .gif) left top repeat-y ;");
OStyleSheet. addRule (". nodetext", "cursor: pointer ;");
OStyleSheet. addRule (". nodepanel", "display: none ;");
Var rootStr = "<div class = \" root \ "fid = \" 0 \ "> <span class = \ "nodetext \" onclick = \ "" + this. treeTagName + ". clickNode (this. parentNode); \ ">" + this. rootText + "</span> <span class = \" nodepanel \ "/> </div>"
Obj. innerHTML = rootStr;
}
}