xml数据岛绑定时的超链接处理

最新推荐文章于 2025-08-25 11:07:55 发布

最新推荐文章于 2025-08-25 11:07:55 发布 · 117 阅读

·

0

·

文章标签：

#XML #Ajax #JavaScript #IE #HTML #ViewUI

本文介绍了一种利用XML数据岛与HTML表格结合显示数据的方法，适用于地图空间搜索等场景，通过动态生成XML数据并绑定到HTML表格中，实现灵活定制布局及交互。

在写地图空间搜索的时候，用ajax返回的数据结果，除了要在地图上标点之外还需要用传统的表格方式罗列，并且可以点击察看信息，因为需要对返回结果的处理足够灵活，所以不能在js当中写死格式。这里用了xml数据岛的方式（系统是只需要考虑IE）只把要用到xml数据信息返回，具体怎么在html页面上布局可以由其它开发人员自己订制。

下面代码去掉了ajax的部分，只简单的演示如何生成一个xml数据岛，以及如何和html表格绑定，并显示出相关的链接信息。其中链接的href内容可以保存在xml数据中，用datafld属性来处理。

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

<head>

<title>XML数据岛</title>

</head>

<scripttype="text/jscript">...

//获取xml，实际应用中大多是ajax异步获取的

functiongetData()

...{

varxmlData="<xmlID=\"xmlData\"><root>";

for(vari=0;i<5;i++)

...{

try

...{

varid="Name"+i;

varType="Type"+i;

xmlData+="<METADATA><Name>"+id+"</Name><Type>"+Type+"</Type><Href>javascript:alert('"+id+"')</Href></METADATA>";

pointIndex++;

}

catch(e)

...{

}

}

xmlData+="</root></xml>";

document.all.xmlDataPanel.innerHTML=xmlData;

}

//简单的添加xml信息

functionaddData()

...{

varxmlData=document.all.xmlDataPanel.innerHTML;

xmlData=xmlData.replace("</root></xml>","");

xmlData+="<METADATA><Name>newName</Name><Type>newType</Type><Href>javascript:alert('newName')</Href></METADATA>";

xmlData+="</root></xml>";

document.all.xmlDataPanel.innerHTML=xmlData;

}

</script>

<body>

<buttononclick="javascript:getData();">获取数据</button>

<buttononclick="javascript:addData();">添加数据</button>

<divid="xmlDataPanel">

</div>

<divstyle="overflow:scroll;height:180;width:180"align="center">

<divalign="left">

<tabledatasrc="#xmlData"border="1">

<tr>

<td>

<adatafld="Href"><spandatafld="Name"></span></a>

</td>

<td>

<spandatafld="Type"></span>

</td>

</tr>

</table>

</div>

</div>

</body>

</html>

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。