| ///////////////////////////////////////////////////////////
First: The XML file (Tree.xml) reads as follows:
<?xml version= "1.0" encoding= "gb2312"?>
<treeview>
<tree id= "P1" >
<text> Shandong Province </text>
<target>_blank</target>
<title> Provinces </title>
<link></link>
<tree id= "P1-1" >
<text> Weihai </text>
<target>_blank</target>
<title> City </title>
<link></link>
</tree>
<tree id= "P1-2" >
<text> Yantai </text>
<target>_blank</target>
<title> City </title>
<link></link>
<node id= "p1-2-1" >
<text> Long Kuang Cun </text>
<target>_blank</target>
<title> Township </title>
<link>http://www.111cn.net/</link>
</node>
</tree>
<node id= "P1-3" >
<text> Fu Zhen </text>
<target>_blank</target>
<title> Township </title>
<link>http://www.111cn.net/</link>
</node>
</tree> <tree id= "P2" >
<text> Hebei province </text>
<target>_blank</target>
<title> Provinces </title>
<link></link>
<tree id= "p2-1" >
<text> Botou </text>
<target>_blank</target>
<title> City </title>
<link></link>
<node id= "P2-1-1" >
<text> Jiao River </text>
<target>_blank</target>
<title> Township </title>
<link>http://www.111cn.net/</link>
</node>
</tree>
<tree id= "P2-2" >
<text> Shijiazhuang </text>
<target>_blank</target>
<title> City </title>
<link></link>
</tree>
</tree> <tree id= "P3" >
<text> Zhejiang province </text>
<target>_blank</target>
<title> Provinces </title>
<link></link>
<tree id= "P3-1" >
<text> Hangzhou City </text>
<target>_blank</target>
<title> City </title>
<link></link>
<node id= "P3-1-1" >
<text> a town </text>
<target>_blank</target>
<title> Township </title>
<link>http://www.111cn.net/</link>
</node>
</tree>
<tree id= "P3-2" >
<text> Wenzhou </text>
<target>_blank</target>
<title> City </title>
<link></link>
<node id= "p3-2-1" >
<text> a town </text>
<target>_blank</target>
<title> Township </title>
<link>http://www.111cn.net/</link>
</node>
</tree>
</tree>
</treeview>
//////////////////////////////////////////////////////
Then: JavaScript function implementation: (File name: tree.htm)
<script language= "JavaScript" >
var HTML = "";
var space = "";
var blank = "";
function Getsubject ()
{
var xmldoc; if (window. ActiveXObject)
{
Object that gets the XML file for the operation
xmldoc = new ActiveXObject (' Microsoft.XMLDOM ');
Xmldoc.async = false;
Xmldoc.load ("Tree.xml");
if (xmldoc = null)
{
Alert (' Your browser does not support XML file reads, so this page prohibits your operation, the recommended use of IE5.0 above can solve this problem! ');
window.location.href= '/index.aspx ';
Return
}
}
Parse XML file to determine if error
if (xmlDoc.parseError.errorCode!= 0)
{
alert (XmlDoc.parseError.reason);
Return
}
Get root Contact
var nodes = XmlDoc.documentElement.childNodes;
The number of common sub contacts under root contact is obtained, and the cyclic
for (var i=0; i<nodes.length; i++)
{
If the contact name is tree
if (nodes (i) nodename = = "Tree")
{
Readtree (Nodes (i));
}
If the contact name is node
else if (nodes (i). nodename = = "Node")
{
ReadNode (Nodes (i));
}
}
Delete Object
Delete (xmldoc);
Show HTML
Window.show.innerHTML = HTML;
Return
}
Read tree node
function Readtree (CI)
{
var nodes = Ci.childnodes;
var menuhtml = space;
menuhtml + = blank;
Get Super Link
menuhtml + = "<a href= '";
If the connection property of the node is not empty, the connection
if (Ci.selectnodes ("link") (0). Text!= "")
{
menuhtml + = ci.selectnodes ("link") (0). text;
}
Otherwise an empty link
Else
{
menuhtml = "#";
}
Goal
if (Ci.selectnodes ("target") (0). Text!= "")
{
menuhtml + + "target= '" +ci.selectnodes ("target") (0). text;
menuhtml + = "'";
}
Click the menu event to invoke the Divshow (vid) function
menuhtml + + "onclick=javascript:divshow ('" +ci.getattribute ("id") + "');";
Get the node title
menuhtml + = "title= '";
menuhtml + = Ci.selectnodes ("title") (0). text;
End
menuhtml = "' >";
Get the body of the node
menuhtml + = ci.selectnodes ("text") (0). text;
menuhtml + = "</a><br>n";
Add menuhtml settings to an HTML string
HTML + menuhtml;
Gets the attribute value of the node <span
HTML + + "<div id= '" +ci.getattribute ("id") + "' style= ' display:none ' >n '";
for (var i=0; i<nodes.length; i++)
{
var tempimg = "";
Tempimg + = blank;
if (nodes (i) nodename = = "Tree")
{
Space + + tempimg;
Readtree (Nodes (i));
Space = "";
}
else if (nodes (i). nodename = = "Node")
{
Space + + tempimg;
ReadNode (Nodes (i));
}
}
HTML + + "</div>n";
Return
}
Read node nodes
function ReadNode (CI)
{
var nodehtml = space;
nodehtml + = blank;
Set up hyperlinks
nodehtml + = "<a href= '";
Get the connection address
nodehtml + = ci.selectnodes ("link") (0). text;
Goal
if (Ci.selectnodes ("target") (0). Text!= "")
nodehtml + = "' target= '" +ci.selectnodes ("target") (0). text;
Get the node title
nodehtml = "' title= '";
nodehtml + = Ci.selectnodes ("title") (0). text;
End
nodehtml = "' >";
Get the body of the node
nodehtml + = ci.selectnodes ("text") (0). text;
nodehtml + = "</a><br>n";
HTML + nodehtml;
HTML + + "<div id= '" +ci.getattribute ("id") + "' >";
Space = "";
Return
}
Action Object display or hide effect
function Divshow (VID)
{
if (Document.all[vid].style.display = "None")
{
Document.all[vid].style.display = "block";
}
Else
{
Document.all[vid].style.display = "None";
}
Return
}
</script>
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 ">
<title>JS_XML</title>
<style type= "Text/css" >
<!--
Body
{
margin-left:0px;
margin-top:0px;
margin-right:0px;
margin-bottom:0px;
font-size:9pt;
}
A
{
Text-decoration:none;
Font-family: "The song Body";
font-size:9pt;
COLOR: #000000;
}
-->
</style> <body bgcolor= "#EEEEEE" leftmargin= "0" topmargin= "0" >
<div id=show></div>
</body>
<script>
Getsubject ()
</script>
|
