求算法,XML读取,写入HTML 结构变换

shootarrow 2009-06-18 12:20:56

求算法
XML结构如下
(其中XML的层级不确定)
<item ID=0>
<item ID=1>
<item ID=11>
<item ID=111 />
<item ID=112 />
</item>
<item ID=12>
<item ID=13>
</item>
<item ID=2></item>
<item ID=3></item>
</item>

以上XML结构通过JQUERY读取,生成以下HTML
<div id="div0">
<a herf="#">1</a>
<a herf="#">2</a>
<a herf="#">3</a>
</div>

<div id="div1">
<a herf="#">11</a>
<a herf="#">12</a>
<a herf="#">13</a>
</div>

<div id="div11">
<a herf="#">111</a>
<a herf="#">112</a>
</div>

...全文

105 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

fosjos 2009-06-18

打赏
举报

递归遍历所有结点

如果当前结点有child
就和child组合输出<div><a>...</a><a>...</a><a>...</a></div>

fosjos 2009-06-18

打赏
举报

[Quote=引用 4 楼 shootarrow 的回复:]
递归出来的DIV是嵌套的，而不是平行的
要求是任何一层读取出来，是平行的，同一层放在同一个DIV里
[/Quote]
遍历是递归，但是输出可以用个全局变量，就不会嵌套了

xingqiliudehuanghun 2009-06-18

打赏
举报

懒的写ajax请求部分的代码，读取部分模拟的，ie的childNodes
属性不计算非Html标记所以此程序只能在Firefox下运行。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >

<title>无标题文档</title>

<script type="text/javascript">

function $(sId){

	return document.getElementById(sId);

}



function getSubNodes(oNode){

	var aChildNodes=oNode.childNodes;

	var i,nLen=aChildNodes.length;

	var aSubNodes=[];

	

	for(i=0;i<nLen;i++){

		if(aChildNodes[i].tagName){

			aSubNodes.push(aChildNodes[i]);

		}

	}

	

	return aSubNodes;

}



function outputNode(oNode,nMargin){

	var sId=oNode.getAttribute("ID");	

	var aSubNodes=getSubNodes(oNode);

	var i,nLen=aSubNodes.length;

	

	alert("id="+sId+",childNodesCount="+nLen);

	if(nLen>0){			

		var oDiv,aHtml=[];

		oDiv=document.createElement("div");

		document.body.appendChild(oDiv);

		oDiv.id="div"+sId;

		oDiv.style.marginLeft=nMargin+"px";

		

		for(i=0;i<nLen;i++){

			aHtml.push(

				"<a href='#'>"

				+aSubNodes[i].getAttribute("ID")

				+"</a>　");

			outputNode(aSubNodes[i],nMargin+30);

		}

		

		oDiv.innerHTML=aHtml.join("");

	}

}



window.onload=function(){

	var oRoot=$("divData").getElementsByTagName("item")[0];

	outputNode(oRoot,0);

}

</script>

</head>

<body>



<!--数据区开始-->

<div id="divData" style="display:none">

    <item ID="0">

      <item ID="1">

          <item ID="11">

            <item ID="111"></item>

            <item ID="112"></item>

          </item>

          <item ID="12"></item>

          <item ID="13"></item>

      </item>

      <item ID="2">

          <item ID="21"></item>

          <item ID="22"></item>      

      </item>

      <item ID="3"></item>

    </item>

</div>

<!--数据区结束-->



</body>

</html>

shootarrow 2009-06-18

打赏
举报

递归出来的DIV是嵌套的，而不是平行的
要求是任何一层读取出来，是平行的，同一层放在同一个DIV里

monexus 2009-06-18

打赏
举报

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

<item id="0">

	<item id="1">

		<item id="11">

			<item id="111">

			</item>

			<item id="112">

			</item>

		</item>

		<item id="12">

			<item id="13">

			</item>

		</item>

	</item>

	<item id="2">

	</item>

	<item id="3">

	</item>

</item>

function creatXHR(){

	if (window.ActiveXObject) return new window.ActiveXObject('Microsoft.XMLHTTP');

	else if (window.XMLHttpRequest) return new window.XMLHttpRequest();

	else return null;

}



function make(id, xml){

	var sub = [], div = '';

	$('#' + id, xml).each(function(){

		div = '<div id="' + this.getAttribute('id') + '">'

		$('#' + id + '>item', xml).each(function(){

			div += '\n<a herf="#">' + this.getAttribute('id') + '<\/a>';

			sub.push(make(this.getAttribute('id'), xml));

		});

		div += '\n<\/div>\n';

	});

	div += sub.join('\n');

	return div;

}



var xhr = creatXHR();

xhr.open('GET', 'xml.xml');

xhr.onreadystatechange = function(){

	if (xhr.readyState == 4 && xhr.status == 200) {

		alert(make(0, xhr.responseXML));

	}

}

xhr.send(null);