javascript解析XML生成树形结构
2011-07-25 08:57
441 查看
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
<script language="javascript" charset="GB2312" type="text/javascript">
var xmlStr='<?xml version="1.0" encoding="utf-8"?><xmlRoot value="root"><child value="c1"><child_1>c11</child_1></child><child>c2</child></xmlRoot>';
var blank=". ";
var blankTimes=0;
var blankSize=20;
var idIndex=0;
function xmlParser(xmlStr)
{
var childs=null;
var root=null;
var xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.loadXML(xmlStr);
root=xmlDoc.documentElement;
//childs=root.getChild
//alert(root.nodeName);
childs=root.childNodes;
//alert(document.body);
var topDiv=document.createElement("div");
document.body.appendChild(topDiv);
//alert(topDiv);
dealWithNode(root,0,topDiv);
}
function dealWithNode(node,blankTimes,container)
{
var children=null;
var childCount=0;
var isLeaf=false;
var htmlnode=null;
var textnode=null;
var bl_times=blankTimes;
var bl_str="";
var node_value="";
// for(var bl=0;bl<bl_times;bl++)
// {
// bl_str=bl_str+blank;
// }
if(node)
{
isLeaf=isLeafNode(node);
if(isLeaf)
{
if(node.nodeType==3)
{
node_value=node.nodeValue;
}
else
{
node_value=node.firstChild.nodeValue;
}
// htmlnode=document.createElement("span");
// textnode=document.createTextNode(bl_str+node_value);
// htmlnode.appendChild(textnode);
// document.body.appendChild(htmlnode);
// document.body.appendChild(document.createElement("<br>"));
//alert(container);
idIndex++;
htmlnode=createItem(node_value,"span"+idIndex,container);
htmlnode.style.paddingLeft=bl_times*blankSize;
//alert(node_value+"-"+bl_times);
//alert(node.firstChild.nodeValue);
}
else
{
node_value=getAttributValue(node,"value");
// htmlnode=document.createElement("span");
// textnode=document.createTextNode(bl_str+node_value);
// htmlnode.appendChild(textnode);
// document.body.appendChild(htmlnode);
// document.body.appendChild(document.createElement("<br>"));
idIndex++;
htmlnode=createItem(node_value,"span"+idIndex,container);
htmlnode.style.paddingLeft=bl_times*blankSize;
//alert(node_value+"-"+bl_times);
var cContainer=createChildContainer("div"+idIndex,container);
cContainer.style.paddingLeft=bl_times*blankSize;
Integration_InterceptCellEvent("span"+idIndex, "onclick", itemClick);
//htmlnode.onclick="itemClick('"+"div"+idIndex+"');";
//alert(htmlnode.onclick);
children=node.childNodes;
bl_times=1;
if(children&&children.length>0)
{
for(var i=0;i<children.length;i++)
{
dealWithNode(children[i],bl_times,cContainer);
}
}
}
}
}
//判断node节点是否是叶子节点
function isLeafNode(node)
{
var children=null;
if(node)
{
if(node.nodeType==3)
{
return true;
}
else
{
children=node.childNodes;
if(children.length==1&&children[0].nodeType==3)
{
return true;
}
else
{
return false;
}
}
}
return true;
}
//根据属性名 获取node节点的attrName属性的属性值
function getAttributValue(node,attrName)
{
var attributes=null;
var attr=null;
if(node)
{
attributes=node.attributes;
if(attributes&&attributes.length>0)
{
for(var attrI=0;attrI<attributes.length;attrI++)
{
attr=attributes[attrI];
if(attr&&attr.nodeName==attrName)
{
return attr.nodeValue;
}
}
}
}
return null;
}
//创建项
function createItem(itemText,idStr,parentContainer)
{
var htmlnode=null;
var textnode=null;
htmlnode=document.createElement("a");
htmlnode.id=idStr;
htmlnode.href="#";
//htmlnode.style.paddingLeft="200";
//htmlnode.expanded="fales";
textnode=document.createTextNode(itemText);
htmlnode.appendChild(textnode);
//alert(parentContainer);
parentContainer.appendChild(htmlnode);
parentContainer.appendChild(document.createElement("<br>"));
return htmlnode;
}
//创建非叶子节点的子节点的容器
function createChildContainer(idStr,parentContainer)
{
var cContainer=null;
cContainer=document.createElement("div");
cContainer.id=idStr;
cContainer.style.display="none";
parentContainer.appendChild(cContainer);
return cContainer;
}
//单击事件
function itemClick()
{
var conId=this.id.replace("span","div")
var container=document.getElementById(conId);
if(container)
{
if(container.style.display=="block")
container.style.display="none";
else
container.style.display="block";
}
//alert(conId);
}
function Integration_InterceptCellEvent(id, evt, func)
{
if (func.constructor == Function)
{
document.write('<scr' + 'ipt for="' + id + '" event="' + evt + '">'
+ 'Array.prototype.push.call(arguments, "' + evt + '");'
+ func.toString().match(//s*Function/s+(/S*)/s*/(/i)[1]
+ '.apply(this, arguments);'
+ '</sc' + 'ript>');
}
} </script>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
</form>
<script language="javascript">xmlParser(xmlStr);</script>
</body>
</html>
<head runat="server">
<title>无标题页</title>
<script language="javascript" charset="GB2312" type="text/javascript">
var xmlStr='<?xml version="1.0" encoding="utf-8"?><xmlRoot value="root"><child value="c1"><child_1>c11</child_1></child><child>c2</child></xmlRoot>';
var blank=". ";
var blankTimes=0;
var blankSize=20;
var idIndex=0;
function xmlParser(xmlStr)
{
var childs=null;
var root=null;
var xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.loadXML(xmlStr);
root=xmlDoc.documentElement;
//childs=root.getChild
//alert(root.nodeName);
childs=root.childNodes;
//alert(document.body);
var topDiv=document.createElement("div");
document.body.appendChild(topDiv);
//alert(topDiv);
dealWithNode(root,0,topDiv);
}
function dealWithNode(node,blankTimes,container)
{
var children=null;
var childCount=0;
var isLeaf=false;
var htmlnode=null;
var textnode=null;
var bl_times=blankTimes;
var bl_str="";
var node_value="";
// for(var bl=0;bl<bl_times;bl++)
// {
// bl_str=bl_str+blank;
// }
if(node)
{
isLeaf=isLeafNode(node);
if(isLeaf)
{
if(node.nodeType==3)
{
node_value=node.nodeValue;
}
else
{
node_value=node.firstChild.nodeValue;
}
// htmlnode=document.createElement("span");
// textnode=document.createTextNode(bl_str+node_value);
// htmlnode.appendChild(textnode);
// document.body.appendChild(htmlnode);
// document.body.appendChild(document.createElement("<br>"));
//alert(container);
idIndex++;
htmlnode=createItem(node_value,"span"+idIndex,container);
htmlnode.style.paddingLeft=bl_times*blankSize;
//alert(node_value+"-"+bl_times);
//alert(node.firstChild.nodeValue);
}
else
{
node_value=getAttributValue(node,"value");
// htmlnode=document.createElement("span");
// textnode=document.createTextNode(bl_str+node_value);
// htmlnode.appendChild(textnode);
// document.body.appendChild(htmlnode);
// document.body.appendChild(document.createElement("<br>"));
idIndex++;
htmlnode=createItem(node_value,"span"+idIndex,container);
htmlnode.style.paddingLeft=bl_times*blankSize;
//alert(node_value+"-"+bl_times);
var cContainer=createChildContainer("div"+idIndex,container);
cContainer.style.paddingLeft=bl_times*blankSize;
Integration_InterceptCellEvent("span"+idIndex, "onclick", itemClick);
//htmlnode.onclick="itemClick('"+"div"+idIndex+"');";
//alert(htmlnode.onclick);
children=node.childNodes;
bl_times=1;
if(children&&children.length>0)
{
for(var i=0;i<children.length;i++)
{
dealWithNode(children[i],bl_times,cContainer);
}
}
}
}
}
//判断node节点是否是叶子节点
function isLeafNode(node)
{
var children=null;
if(node)
{
if(node.nodeType==3)
{
return true;
}
else
{
children=node.childNodes;
if(children.length==1&&children[0].nodeType==3)
{
return true;
}
else
{
return false;
}
}
}
return true;
}
//根据属性名 获取node节点的attrName属性的属性值
function getAttributValue(node,attrName)
{
var attributes=null;
var attr=null;
if(node)
{
attributes=node.attributes;
if(attributes&&attributes.length>0)
{
for(var attrI=0;attrI<attributes.length;attrI++)
{
attr=attributes[attrI];
if(attr&&attr.nodeName==attrName)
{
return attr.nodeValue;
}
}
}
}
return null;
}
//创建项
function createItem(itemText,idStr,parentContainer)
{
var htmlnode=null;
var textnode=null;
htmlnode=document.createElement("a");
htmlnode.id=idStr;
htmlnode.href="#";
//htmlnode.style.paddingLeft="200";
//htmlnode.expanded="fales";
textnode=document.createTextNode(itemText);
htmlnode.appendChild(textnode);
//alert(parentContainer);
parentContainer.appendChild(htmlnode);
parentContainer.appendChild(document.createElement("<br>"));
return htmlnode;
}
//创建非叶子节点的子节点的容器
function createChildContainer(idStr,parentContainer)
{
var cContainer=null;
cContainer=document.createElement("div");
cContainer.id=idStr;
cContainer.style.display="none";
parentContainer.appendChild(cContainer);
return cContainer;
}
//单击事件
function itemClick()
{
var conId=this.id.replace("span","div")
var container=document.getElementById(conId);
if(container)
{
if(container.style.display=="block")
container.style.display="none";
else
container.style.display="block";
}
//alert(conId);
}
function Integration_InterceptCellEvent(id, evt, func)
{
if (func.constructor == Function)
{
document.write('<scr' + 'ipt for="' + id + '" event="' + evt + '">'
+ 'Array.prototype.push.call(arguments, "' + evt + '");'
+ func.toString().match(//s*Function/s+(/S*)/s*/(/i)[1]
+ '.apply(this, arguments);'
+ '</sc' + 'ript>');
}
} </script>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
</form>
<script language="javascript">xmlParser(xmlStr);</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- javascript解析XML生成树形结构
- javascript解析XML生成树形结构(兼容Firefox，IE9)
- javascript操作xml生成树形菜单
- 生成一个树形结构 javascript
- javascript操作xml生成树形菜单
- 从LayoutInflater分析XML布局解析成View的树形结构的过程
- java WebService接口开发注意点 java 利用Xstream生成和解析xml知识结构
- 用JavaScript生成Android SDK的下载地址（2）——异步加载、解析xml，得到全部SDK的下载地址
- JavaScript递归方法 生成 json tree 树形结构数据
- 利用JavaScript 动态生成 树形结构
- 多叉树结合JavaScript树形控件实现无限级树形菜单（一种构建多级有序树形结构JSON（或XML）数据源的方法）
- JavaScript递归方法 生成 json tree 树形结构数据
- javascript操作xml生成树形菜单
- 多叉树结合JavaScript树形控件实现无限级树形菜单（一种构建多级有序树形结构JSON（或XML）数据源的方法）
- 从LayoutInflater分析XML布局解析成View的树形结构的过程
- 从LayoutInflater分析XML布局解析成View的树形结构的过程
- 利用JavaScript 动态生成 树形结构
- 多叉树结合JavaScript树形控件实现无限级树形菜单（一种构建多级有序树形结构JSON（或XML）数据源的方法）
- 从LayoutInflater分析XML布局解析成View的树形结构的过程
- 解析树形结构，拼XML