javascript解析XML生成树形结构
来源：互联网 发布：淘宝蛋刀必出bug 编辑：程序博客网 时间：2024/04/30 11:25
- <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>
- javascript解析XML生成树形结构
- javascript解析XML生成树形结构
- javascript解析XML生成树形结构(兼容Firefox，IE9)
- 生成一个树形结构 javascript
- javascript操作xml生成树形菜单
- javascript操作xml生成树形菜单
- javascript操作xml生成树形菜单
- ASP.NET＋XML+JavaScript 无限级树形结构
- xml 树形结构
- 树形结构解析
- 树形数据生成XML
- javaScript树形结构
- 数据库版 树形生成结构
- js动态生成树形结构
- 内存递归生成树形结构
- 动态生成javascript树形菜单
- 从LayoutInflater分析XML布局解析成View的树形结构的过程
- 从LayoutInflater分析XML布局解析成View的树形结构的过程
- 532 3Ddfs- Dungeon Master
- 温州高铁事故再一次用N条生命有力地证明了中国高铁具有自主的知识产权。绝对不存在剽窃其它国家的先进的技术成果。
- C语言：格式控制符
- 如何使用VS2008打开VS2010的解决方案
- Java继承，创建对象初始化顺序
- javascript解析XML生成树形结构
- 关于编程，大学没有传授的10件事
- 黑马程序员Java基础加强49-56学习日记
- 社交网络成美国雇主应聘者背景调查渠道
- 可并堆 poj3016 不平衡的美
- vc里使用GDI+
- ubuntu 8.04下安装NS2(ns-allinone-2.30) 安装问题处理(转)
- 09-struts-ActionForward
- asp.net 图片显示有被调用显示怪异问题
