DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> XML學習教程 >> XML詳解 >> xml數據島綁定時的超鏈接處理
xml數據島綁定時的超鏈接處理
編輯:XML詳解     

在寫地圖空間搜索的時候,用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>


XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved