JS "Tree" reads XML data

Recently, I 've seen everyone practice writing trees, and I 've even learned how to write one. I'm making great progress.

However, I have read that XML documents of some trees already have tree structures in xml, so I have written an XML document that does not need to be layered to generate a tree, however, you need to define the ID and parent number for each node.

It is a bit rough. Don't joke. You will learn to improve it later.

Demo address: Www.lapuasi.com/javascript/xmltree

Usage:
VaR tree = new xmltree ('tree'); // generate an object
Tree. mode = 1; // set the initial mode. All are disabled by default. 0 close all, 1 expand all
Tree. createtree (); // output tree

JavascriptCode:

/* JavaScript document */

/*
Xmltree v1.2
======================================
Infomation
----------------------
Author: lapuasi
E-mail: lapuasi@gmail.com
Web: http://www.lapuasi.com/javascript
Datetime: 2005-12-25
Example
----------------------
VaR tree = new xmltree ('tree'); // generate an object
Tree. mode = 1; // set the initial mode. All are disabled by default. 0 close all, 1 expand all
Tree. createtree (); // output tree
For Internet Explorer, Mozilla Firefox
*/
Function xmltree (name ){
This. Name = Name; // Instance name
This. xmlfile = 'xmltree. xml'; // default XML file
This. iconpath = 'images/'// default icon path
This. iconfolder = 'tree_icon_folder.gif '; // default folder icon
This. iconfile = 'tree_icon_file.gif '; // default file icon
This. iconopen = 'tree_arrow_open.gif '; // The default arrow to expand the icon.
This. iconover = 'tree_arrow_over.gif '; // default arrow activity icon
This. iconclose = 'tree_arrow_close.gif '; // The default arrow to close the icon.
This. mode = 0; // The initial mode, which is disabled by default. 0 close all, 1 expand all
This.html = ''; // final HTML code output
This. prevtip = NULL; // time number of the last displayed tip (used internally)
This. prevselected = NULL; // The automatic number of the last selected node (used internally)
}
Xmltree. Prototype. createxmldom = function () {// generate an xmldom object
VaR xmldom;
If (window. activexobject ){
VaR xmldom = new activexobject ("Microsoft. xmldom ");
} Else {
If (document. Implementation & document. Implementation. createdocument ){
VaR xmldom = Document. Implementation. createdocument ("", "Doc", null );
}
}
Xmldom. async = false;
Xmldom. resolveexternals = false;
Xmldom. validateonparse = false;
Xmldom. preservewhitespace = true;
Return xmldom;
}
Xmltree. Prototype. createtree = function () {// generate and print
VaR xmldom = This. createxmldom ();
Document. Write ('<Div id = "Tree"> <\/div>'); // layer used by the tree
Document. Write ('<Div id = "treetip"> <\/div>'); // prompt the layer used
Document. getelementbyid ('treetip '). style. Visibility = 'visible ';
Document. getelementbyid ('treetip '). style. Display = 'none ';
If (xmldom. Load (this. xmlfile )){
This. createnodes (xmldom );
} Else {
This.html = 'Load XML error ';
}
Document. getelementbyid ('tree'). innerhtml = this.html;
Return;
}
Xmltree. Prototype. getfirstchilddata = function (OBJ, name) {// retrieve data from the first subnode of the specified Name Node
VaR result = '';
If (typeof (OBJ) = 'object' & name! = NULL & name! = ''){
VaR node = obj. getelementsbytagname (name );
If (node! = NULL & node. length> 0 ){
Result = node [0]. firstchild. Data;
}
}
Return result;
}
Xmltree. Prototype. checkchildnodes = function (OBJ, ID) {// check for any branch
VaR result = false;
VaR nodes = obj. getelementsbytagname ('node ');
If (nodes! = NULL & nodes. length> 0 ){
// Var PID;
For (VAR I = 0; I <nodes. length; I ++ ){
// Pid = nodes [I]. getattribute ('parentid ');
If (nodes [I]. getattribute ('parentid') = ID ){
Result = true;
Break;
}
}
}
Return result;
}
Xmltree. Prototype. createnodes = function (OBJ, ID) {// generate the tree of the specified number Node
If (typeof (ID) = 'undefined') id = NULL; // if no ID is input, it is the root node.
VaR nodes = obj. getelementsbytagname ('node ');
If (nodes! = NULL & nodes. length> 0 ){
VaR modeclass, modesrc, iconclass, iconsrc;
VaR NID, npid, nname, nicon, nlink, ntarget, nexplain, haschildnodes;

// Determine the mode type and apply the style
Modeclass = 'close ';
Modesrc = This. iconpath + this. iconclose;
If (this. mode = 1 ){
Modesrc = This. iconpath + this. iconopen;
Modeclass = 'open ';
}
If (ID = NULL) modeclass = 'open'; // displays
This.html + = '<ul id = "tree _' + ID + '_ C" Class = "' + modeclass + '"> ';

For (VAR I = 0; I <nodes. length; I ++ ){
Npid = nodes [I]. getattribute ('parentid ');
If (npid = ID ){
// Initialization
Modeclass = 'close'; iconclass = 'icon-file'; iconsrc = This. iconpath + this. iconfile;

// Obtain and check the node number
Nid = nodes [I]. getattribute ('id ');
This.html + = '<li id = "tree _' + NID + '"> <span onclick = "' + this. name + '. action (this, event); "onmouseover =" '+ this. name + '. action (this, event); "onmouseout =" '+ this. name + '. action (this, event); "> ';

// Get the node custom icon
// Determine whether a subnode exists, and determine the arrows and icons and the style.
Nicon = This. getfirstchilddata (nodes [I], 'icon ');
Haschildnodes = This. checkchildnodes (OBJ, NID );
If (haschildnodes ){
Iconclass = '';
Iconsrc = This. iconpath + this. iconfolder;
This.html + = ' '; // arrow
}
If (nicon! = '') Iconsrc = nicon;
This.html + = ' '; // icon

// Get node connection
Nlink = This. getfirstchilddata (nodes [I], 'link ');
If (nlink! = ''){
Nlink = 'href = http://www.webjx.com/htmldata/2006-01-14/ "'+ nlink + '"';
} Else {
Nlink = 'href = "javascript :;"';
}

// Obtain the node target
Ntarget = This. getfirstchilddata (nodes [I], 'target ');
If (ntarget! = ''){
Ntarget = 'target = "'+ ntarget + '"';
}

// Get node description
Nexplain = This. getfirstchilddata (nodes [I], 'explain ');
If (nexplain! = ''){
Nexplain = 'onmouseover = "'+ this. name + '. treetips (\ ''+ nexplain + '\');" onmouseout = "'+ this. name + '. treetips ();"'
}

// Obtain the node name
Nname = This. getfirstchilddata (nodes [I], 'name ');
This.html + = '<a id = "tree _' + NID + '_ L" onclick = "' + this. name + '. action (this, event); "'+ nlink + ntarget + nexplain +'> '+ nname +' <\/A> <\/span> ';

// Obj.doc umentelement. removechild (nodes [I]);
If (haschildnodes) This. createnodes (OBJ, NID); // iteration subnode

This.html + = '<\/LI> ';
}
}
This.html + = '<\/ul> ';
}
Return;
}
Xmltree. Prototype. Action = function (OBJ, e) {// node operation
E = e? E: (window. event? Window. Event: NULL); // obtain the Operation Type
E = E. type;
If (obj. tagname = 'A '){
Try {This. prevselected. classname = '';}
Catch (e ){}
This. prevselected = OBJ;
OBJ. classname = 'selected ';
}
If (obj. tagname = 'span '){
VaR arrow = obj. firstchild; // retrieves an arrow object.
VaR borther = OBJ;
While (borther. tagname! = 'Ul ') {// obtain the branch object
Borther = borther. nextsibling;
If (borther = NULL) break;
}
If (borther! = NULL ){
Switch (e) {// check the operation type and execute the corresponding code
Case 'click ':
If (borther. classname = 'open '){
Borther. classname = 'close ';
Arrow. src = This. iconpath + this. iconclose;
} Else {
Borther. classname = 'open ';
Arrow. src = This. iconpath + this. iconopen;
}
Break;
Case 'mouseover ':
If (arrow. tagname = 'img '& borther. classname = 'close '){
Arrow. src = This. iconpath + this. iconover;
}
Break;
Case 'mouseout ':
If (arrow. tagname = 'img '& borther. classname = 'close '){
Arrow. src = This. iconpath + this. iconclose;
}
Break;
}
}
}
Return;
}
Xmltree. Prototype. treetips = function (MSG) {// prompt bar
If (this. prevtip! = NULL) cleartimeout (this. prevtip );
VaR OBJ = Document. getelementbyid ('treetip ');
If (OBJ! = NULL ){
If (this. treetips. Arguments. Length <1) {// hide
OBJ. style. Display = 'none ';
} Else {// show
OBJ. innerhtml = MSG;
This. prevtip = setTimeout ('document. getelementbyid ("treetip"). style. Display = "Block" ', 300 );
Document. onmousemove = This. movetomouseloc;
}
}
Return;
}
Xmltree. Prototype. movetomouseloc = function (e) {// move the cursor
VaR OBJ = Document. getelementbyid ('treetip ');
If (OBJ! = NULL ){
VaR offsetx =-10, offsety = 20;
VaR x = 0, y = 0;
If (window. Event ){
X = event. x + document. Body. scrollleft;
Y = event. Y + document. Body. scrolltop;
} Else {
X = E. pagex;
Y = E. Pagey;
}
OBJ. style. Left = x + offsetx + 'px ';
OBJ. style. Top = Y + offsety + 'px ';
}
Return;
}