Sample code sharing for hyperlink processing when binding xml data island

黄舟
Release: 2017-03-24 17:05:59
Original
1682 people have browsed it

When writing a map space search, the data results returned by ajax need to be listed in a traditional table in addition to punctuation on the map, and the information can be viewed by clicking, because the processing of the returned results needs to be flexible enough. , so the format cannot be hard-coded in js. The XML data island method is used here (the system only needs to consider IE) and only the XML data information to be used is returned. The specific layout on the HTML page can be customized by other developers.

The following code removes the ajax part, and simply demonstrates how to generate an xml data island, how to bind it to an html table, and display related link information. The href content of the link can be saved in xml data and processed with the datafld attribute.

<html xmlns="">
<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:aler t(&#39;"+id+"&#39;)</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(&#39;newName&#39;) </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>
Copy after login

The above is the detailed content of Sample code sharing for hyperlink processing when binding xml data island. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!