JS读取XML字符串生成树结构

           根据上篇文章整理出本人所需的JS读取XML字符串生成树，这是我自己根据上面文章所说的JS文件修改的，作为存档记录，所以不做详细介绍了。

////JS代码
function caret(xmls) {
document.write('<div id="tree"><\/div>'); // 输出一个div层用来放菜单
document.write('<div id="treeTip"><\/div>');
document.getElementById('treeTip').style.visibility = 'visible';
document.getElementById('treeTip').style.display = 'none';

var xmlStrDoc = null;
if (window.DOMParser) {// Mozilla Explorer
parser = new DOMParser();
xmlStrDoc = parser.parseFromString(xmls, "text/xml");
} else {// Internet Explorer
xmlStrDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlStrDoc.async = "false";
xmlStrDoc.loadXML(xmls);
}
creteTree(xmlStrDoc);
document.getElementById('tree').innerHTML = html;
}
function creteTree(xmlStrDoc, id) {
if (typeof (id) == 'undefined') id = null; //如果没有传ID时id为null则为父节点
var nodes = xmlStrDoc.getElementsByTagName('Node');
if (nodes != null && nodes.length > 0) {
var modeClass, modeSrc, iconClass, iconSrc;
var nid, npid, nname, nicon, nlink, ntarget, nexplain, hasChildNodes;

//判断树节点是否是打开状态并改变样式
modeClass = 'close';
modeSrc = iconPath + iconClose;
if (mode == 1) {
modeSrc = iconPath + iconOpen;
modeClass = 'open';
}
if (id == null) modeClass = 'open'; //将样式设置为打开
html += '<ul id="tree_' + id + '_c" class="' + modeClass + '">';

for (var i = 0; i < nodes.length; i++) {
npid = nodes[i].getAttribute('ParentID');
if (npid == "") {
npid = null;
}
if (npid == id) {
//��ʼ��
modeClass = 'close'; iconClass = 'icon-file'; iconSrc = iconPath + iconFile;

//当前节点有子节点时
nid = nodes[i].getAttribute('id');
html += '<li id="tree_' + nid + '"><span onclick="action(this,event);" onmouseover="action(this,event);" onmouseout="action(this,event);">';

//获取子节点
nicon = getFirstChildData(nodes[i], 'icon');
hasChildNodes = checkChildNodes(xmlStrDoc, nid);
if (hasChildNodes) {
iconClass = '';
iconSrc = iconPath + iconFolder;
html += '<img id="tree_' + nid + '_a" src="' + modeSrc + '" class="arrow" \/>'; //��ͷ
}
if (nicon != '') iconSrc = nicon;
html += '<img id="tree_' + nid + '_i" src="' + iconSrc + '" class="' + iconClass + '" \/>'; //ͼ��

//当节点有link地址时，添加a标签的href
nlink = getFirstChildData(nodes[i], 'link');
if (nlink != '') {
nlink = ' href="' + nlink + '"';
} else {
nlink = ' href="javascript:;"';
}

//a标签的href页面显示在哪
ntarget = getFirstChildData(nodes[i], 'target');
if (ntarget != '') {
ntarget = ' target="' + ntarget + '"';
}

//添加鼠标事件
nexplain = getFirstChildData(nodes[i], 'explain');
if (nexplain != '') {
nexplain = ' onmouseover="treeTips(\'' + nexplain + '\');" onmouseout="treeTips();"'
}

//添加节点及节点的点击事件
nname = getFirstChildData(nodes[i], 'Name');
html += '<a id="tree_' + nid + '_l" onclick="action(this,event);"' + nlink + ntarget + nexplain + '>' + nname + '<\/a><\/span>';

//obj.documentElement.removeChild(nodes[i]);
if (hasChildNodes) {
creteTree(xmlStrDoc, nid); //递归此方法
}

html += '<\/li>';
}
}
html += '<\/ul>';
}
return;
}

4000
function checkChildNodes(obj, id) { //����Ƿ��з�֧
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;
}

function getFirstChildData(obj, name) { //
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;
}

function action(obj, e) { //点击事件
e = e ? e : (window.event ? window.event : null);
e = e.type;
if (obj.tagName == 'A') {
try {
this.prevSelected.className = '';
var ss = obj.parentElement.parentElement;
var dd = ss.childNodes;
//点击的a标签是子节点时
if (dd.length == 1) {
var cc = obj.id;
alert(cc.replace("tree_", "").replace("_l", ""));
}
}
catch (e) {
var ss = obj.parentElement.parentElement;
var dd = ss.childNodes;
if (dd.length == 1) {
var cc = obj.id;
alert(cc.replace("tree_", "").replace("_l", ""));
}
}
this.prevSelected = obj;
obj.className = 'selected';
}
if (obj.tagName == 'SPAN') {
var arrow = obj.firstChild; //
var borther = obj;
while (borther.tagName != 'UL') { //
borther = borther.nextSibling;
if (borther == null) break;
}
if (borther != null) {
switch (e) { //判断事件
case 'click':
if (borther.className == 'open') {
borther.className = 'close';
arrow.src = iconPath + iconClose;
} else {
borther.className = 'open';
arrow.src = iconPath + iconOpen;
}
break;
case 'mouseover':
if (arrow.tagName == 'IMG' && borther.className == 'close') {
arrow.src = iconPath + iconOver;
}
break;
case 'mouseout':
if (arrow.tagName == 'IMG' && borther.className == 'close') {
arrow.src = iconPath + iconClose;
}
break;
}
}
}
return;
}
function treeTips(msg) { //��ʾ��
if (prevTip != null) clearTimeout(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;
tprevTip = setTimeout('document.getElementById("treeTip").style.display = "block"', 300);
document.onmousemove = moveToMouseLoc();
}
}
return;
}

function moveToMouseLoc(e) { //
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;
}


HTML 应用代码<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="css/xmltree.css" />
<script type="text/javascript" src="js/tree.js"></script>
<title></title>
<style type="text/css">
body
{
font-size: 11px;
font-family: Tahoma, Verdana, sans-serif;
text-align: center;
}
div
{
margin: auto;
}
</style>
<script type="text/javascript">
function aa(e) {
var li = e.id;
alert(li);
}
var iconPath = 'images/' //图片根目录
var iconFolder = 'tree_icon_folder.gif'; //文件图片
var iconFile = 'tree_icon_file.gif'; //文件夹图片
var iconOpen = 'tree_arrow_open.gif'; //点击打开时的图片
var iconOver = 'tree_arrow_over.gif';
var iconClose = 'tree_arrow_close.gif';
var html = "";
var prevTip = null;
var mode = 1;

</script>
</head>
<body>
<div style="width: 400px; display: block; border: 1px solid red; float: left;">
<script type="text/javascript">
var xmli = '<?xml version="1.0" encoding="GB2312" ?> <NodeList><Node id="1" ParentID=""><Name>深圳市</Name><NodeType>4</NodeType><Status>0</Status></Node><Node id="2" ParentID=""><Name>test</Name><NodeType>4</NodeType><Status>0</Status></Node><Node id="1-1" ParentID="1"><Name>福田区</Name><NodeType>1</NodeType><Status>0</Status></Node><Node id="1-2" ParentID="1"><Name>南山区</Name><NodeType>1</NodeType><Status>0</Status></Node><Node id="1-3" ParentID="1"><Name>罗湖区</Name><NodeType>1</NodeType><Status>0</Status></Node><Node id="1-4" ParentID="1"><Name>龙华区</Name><NodeType>1</NodeType><Status>0</Status></Node><Node id="1-5" ParentID="1"><Name>宝安区</Name><NodeType>1</NodeType><Status>0</Status></Node><Node id="1-6" ParentID="1"><Name>龙岗区</Name><NodeType>1</NodeType><Status>0</Status></Node><Node id="1-7" ParentID="1-2"><Name>蛇口</Name><NodeType>1</NodeType><Status>0</Status></Node><Node id="1-8" ParentID="1"><Name>华三平台</Name><NodeType>1</NodeType><Status>0</Status></Node><Node id="1-2-2" ParentID="1-2"><Name>DH_11</Name><NodeType>5</NodeType><Status>0</Status></Node><Node id="1-2-23" ParentID="1-2"><Name>HK_64</Name><NodeType>5</NodeType><Status>0</Status></Node><Node id="1-0-37" ParentID="1"><Name>ht_180_50</Name><NodeType>5</NodeType><Status>0</Status></Node><Node id="1-0-38" ParentID="1"><Name>Bosch_188</Name><NodeType>5</NodeType><Status>0</Status></Node><Node id="1-0-41" ParentID="1"><Name>ONVIF_64</Name><NodeType>5</NodeType><Status>0</Status></Node><Node id="1-0-42" ParentID="1"><Name>hk_65</Name><NodeType>5</NodeType><Status>0</Status></Node><Node id="1-0-42-2-1" ParentID="1-0-42"><Name>MPEG4:Full</Name><NodeType>6</NodeType><Status>0</Status></Node><Node id="1-0-42-2-4" ParentID="1-0-42"><Name>MPEG4:QCIF</Name><NodeType>6</NodeType><Status>0</Status></Node><Node id="1-0-43" ParentID="1"><Name>zetado</Name><NodeType>5</NodeType><Status>0</Status></Node></NodeList>';
caret(xmli);
</script>
</div>
</body>
</html>


以上