在寫地圖空間搜索的時候,用AJax返回的數據結果,除了要在地圖上標點之外還需要 用傳統的表格方式羅列,並且可以點擊察看信息,因為需要對返回結果的處理足夠靈活,所以不能在JS當中寫死格式。這裡用了xml數據島的方式(系統是只需要考慮IE)只把要用到XML數據信息返回,具體怎麼在Html頁面上布局可以由其它開發人員自己訂制。
下面代碼去掉了AJax的部分,只簡單的演示如何生成一個XML數據島,以及如何和Html表格綁定,並顯示出相關的鏈接信息。其中鏈接的href內容可以保存在XML數據中,用datafld屬性來處理。
<Html XMLns="http://www.w3.org/1999/xhtml">
<head>
<title>XML數據島</title>
</head>
<script type="text/JScript">...
//獲取XML,實際應用中大多是AJax異步獲取的
function getData()
...{
var xmlData="<xml ID="XMLData"><root>";
for(var i=0;i<5;i++)
...{
try
...{
var id="Name"+i;
var Type="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信息
function addData()
...{
var xmlData= 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>
<button onclick="Javascript:getData();">獲取數據</button>
<button onclick="Javascript:addData();">添加數據</button>
<div id="XMLDataPanel">
</div>
<div style="overflow: scroll; height: 180;width:180" align="center">
<div align="left">
<!--綁定,超鏈接的地方用 datafld屬性,href的值也可以保存在XML數據島當中,比較靈活,可以使JS函數或者一個url地址-->
<table datasrc="#XMLData" border="1">
<tr>
<td>
<a datafld="Href"><span datafld="Name"></span></a>
</td>
<td>
<span datafld="Type"></span>
</td>
</tr>
</table>
</div>
</div>
</body>
</Html>