JS "tree" reads XML data

js|xml| data

Recently saw everyone practice writing tree, I also learn to learn to write a, everyone a lot of criticism, I good progress.

But I looked at some of the tree's XML documents are already in XML to have the structure of the tree, so I wrote an XML document without layering, to build the tree, but to each node to define number and parent number.

Write a bit rough, we do not joke, later gradually learn in the improvement.

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

How to use:
var tree = new XmlTree (' tree '); Build Object
Tree.mode = 1; Sets the initial mode and closes all by default. 0 all closed, 1 all expanded
Tree.createtree (); Output tree

JavaScript code:

/* JavaScript Document/*

/*
XmlTree v1.2
=================================
Infomation
----------------------
Author:lapuasi
E-mail:lapuasi@gmail.com
Website:http://www.lapuasi.com/javascript
datetime:2005-12-25
Example
----------------------
var tree = new XmlTree (' tree '); Build Object
Tree.mode = 1; Sets the initial mode and closes all by default. 0 all closed, 1 all expanded
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 '; Default Arrow Expand icon
This.iconover = ' tree_arrow_over.gif '; Default arrow activity icon
This.iconclose = ' tree_arrow_close.gif '; Default arrow Close icon
This.mode = 0; Initial mode, all closed by default. 0 all closed, 1 all expanded
this.html = '; Final output HTML code
This.prevtip = null; The time number of the last tip that was displayed (used internally)
this.prevselected = null; Automatic numbering of the last selected node (internal use)
}
XmlTree.prototype.createXMLDOM = function () {///Generate 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 () {//Build and Print
var xmldom = This.createxmldom ();
document.write (' <div id= ' tree ' ><\/div> '); The layer used by the tree
document.write (' <div id= ' Treetip "><\/div>"); Hint at 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) {//Get data for the first child node 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) {//detect if there is a 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) {//tree that generates the specified number node
if (typeof (id) = = ' undefined ') id = null; The root node if no ID is passed in
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 pattern type and apply a style
Modeclass = ' close ';
MODESRC = This.iconpath + this.iconclose;
if (This.mode = = 1) {
MODESRC = This.iconpath + This.iconopen;
Modeclass = ' open ';
}
if (id = = NULL) Modeclass = ' open '; If the root node is displayed
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) {
    //initializes
    modeclass = ' Close '; Iconclass = ' icon-file '; ICONSRC = This.iconpath + this.iconfile;

    //Gets the node number and detects
    nid = nodes[i].getattribute (' id ');
    this.html + = ' <li id= ' tree_ ' + nid + ' "><span >;"
    
    //Gets the node custom icon
    //to determine whether a child node is included. and determine the arrows and icons of the picture and style
    nicon = This.getfirstchilddata (nodes[i], ' icon ');
    haschildnodes = This.checkchildnodes (obj, nid);
    if (haschildnodes) {
     iconclass = ';
&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;ICONSRC = This.iconpath + This.iconfolder;
     this.html + = ' '; Arrow
    }
    if (Nicon!= ') iconsrc = Nicon;
    this.html + = '

Get node Connection
Nlink = This.getfirstchilddata (nodes[i], ' link ');
if (Nlink!= ') {
Nlink = ' href= ' + Nlink + ' ";
} else {
Nlink = ' href= ' javascript:; "';
}

Get 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 = ' '
}

Get node Name
Nname = This.getfirstchilddata (nodes[i], ' name ');
this.html + = ' <a id= ' tree_ ' + nid + ' _l ' + nlink + ntarget + nexplain + ' > ' + nname + ' <\/a><\/span> ';

Obj.documentElement.removeChild (Nodes[i]);
if (haschildnodes) this.createnodes (obj, nid); Iteration child nodes

this.html + = ' <\/li> ';
}
}
this.html + = ' <\/ul> ';
}
Return
}
xmlTree.prototype.action = function (obj, e) {//node operations
E = e? E: (window.event window.event:null); Get action 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; Get Arrow Object
var borther = obj;
while (borther.tagname!= ' UL ') {//Get branch Object
Borther = borther.nextsibling;
if (borther = null) break;
}
if (borther!= null) {
Switch (e) {//Detect operation type and execute 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 to mouse location
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
}

XML data:

<?xml version= "1.0" encoding= "Utf-8"?>

<!--
CODE by lapuasi.com [2005-12-14]

Explain:
===================================================
Node is one of the nodes of the tree with the following properties and contents
Property
ID: number, if not unique, take only the first, the rest is ignored (must, can be any character combination)
ParentID: Parent number, no parent node (optional, can be any combination of characters)
Content
Name: (required)
Link: connection (optional)
Target: Destination (optional)
Icon: icons (optional)
Explain: description (optional)
-->

<root>
<node id= "N1" >
<name> My Computer </name>
<icon>images/tree_icon_computer.gif</icon>
<explain> displays the drives and hardware connected to this computer </explain>
</node>
<node id= "2" parentid= "N1" >
<name> Hard Drive (C:) </name>
<icon>images/tree_icon_driver.gif</icon>
</node>
<node id= "3" >
<name> Network Neighborhood </name>
<icon>images/tree_icon_net.gif</icon>
<explain> Show shortcuts to Web sites, network computers, and FTP sites </explain>
</node>
<node id= "4" parentid= "N1" >
<name> Hard Drive (D:) </name>
<icon>images/tree_icon_driver.gif</icon>
</node>
<node id= "5" parentid= "2" >
<name>Windows</name>
</node>
<node id= "6" parentid= "3" >
<name>menu6</name>
</node>
<node id= "7" parentid= "3" >
<name>menu7</name>
</node>
<node id= "8" parentid= "3" >
<name>menu8</name>
</node>
<node id= "9" parentid= "7" >
<name>menu9</name>
</node>
<node id= "Ten" >
<name> Recycle Bin </name>
<icon>images/tree_icon_recycler.gif</icon>
<explain> contains files and folders that you have deleted </explain>
</node>
<node id= "One" parentid= "5" >
<name>system32</name>
</node>
<node id= "A" parentid= "one" >
<name>system.dll</name>
<link>http://www.lapuasi.com</link>
<target>_blank</target>
</node>
<node id= "parentid=" 7 ">
<name>menu13</name>
</node>
<node id= "parentid=" N1 ">
<name>dvd drives </name>
<icon>images/tree_icon_cdrom.gif</icon>
</node>
</root>