XML卷之實戰錦囊(1)——動態排序_Xml教程

      編輯Tag賺U幣
      教程Tag:暫無Tag,歡迎添加,賺取U幣!

      推薦:利用XML開發留言板簡單的例子
      XML是一種基于文本格式的元標記語言,它注重對數據結構和數據意義的描述,實現了數據內容和顯示樣式的分離(xml xsl),而且是與平臺無關的。 由于XML注重數據內容的描述,因而,對于數據的檢

      排序功能讓我們頁面上的數據顯的更人性化,是我們在網站上見過的很普遍的一個功能效果了。以往的自動排序都是用大量的腳本代碼來完成的,對一般的愛好者來說這是件困難的事情。然而用XML來處理的話就簡單多了。讓自己的頁面更加絢麗,哈哈,您是不是也心動了呢!

      材料:

      XML卷之動態排序

      有2個文件:paixu.xml 和 paixu.xsl

      作用:

      在不刷新頁面的情況下更據用戶自己的需要對數據重新進行排序顯示,有效的提高數據互動功能,讓自己的頁面更加絢麗多彩。

      代碼:

      以下為引用的內容:

      paixu.xml
      <?xml version="1.0" encoding="gb2312" ?>
      <?xml-stylesheet type="text/xsl" href="paixu.xsl" ?>
      <BlueIdea>
      <team>
      <blue_ID>1</blue_ID>
      <blue_name>Sailflying</blue_name>
      <blue_text>一個簡單的排序</blue_text>
      <blue_time>2002-1-11 17:35:33</blue_time>
      <blue_class>XML專題</blue_class>
      </team>
      <team>
      <blue_ID>2</blue_ID>
      <blue_name>flyingbird</blue_name>
      <blue_text>嫁給你,是要你疼的</blue_text>
      <blue_time>2001-09-06 12:45:51</blue_time>
      <blue_class>灌水精華</blue_class>
      </team>
      <team>
      <blue_ID>3</blue_ID>
      <blue_name>苛子</blue_name>
      <blue_text>正則表達式在UBB論壇中的應用</blue_text>
      <blue_time>2001-11-23 21:02:16</blue_time>
      <blue_class>Web 編程精華</blue_class>
      </team>
      <team>
      <blue_ID>4</blue_ID>
      <blue_name>太乙郎</blue_name>
      <blue_text>年末經典分舵聚會完全手冊 v0.1</blue_text>
      <blue_time>2000-12-08 10:22:48</blue_time>
      <blue_class>論壇灌水區</blue_class>
      </team>
      <team>
      <blue_ID>5</blue_ID>
      <blue_name>mmkk</blue_name>
      <blue_text>Asp錯誤信息總匯</blue_text>
      <blue_time>2001-10-13 16:39:05</blue_time>
      <blue_class>javascript腳本</blue_class>
      </team>
      </BlueIdea>

      paixu.xsl
      <?xml version="1.0" encoding="gb2312" ?>
      <xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
      <xsl:template match="/">
      <html>
      <head>
      <title> XML卷之實戰錦囊(1):動態排序</title>
      <style>
      body,BlueIdea,team,blue_ID,blue_name,blue_text,blue_time,blue_class{ font: 12px "宋體", "Arial", "Times New Roman"; }
      table { font-size: 12px; border: 0px double; border-color: #99CC99 #99CC99 #CCCCCC #CCCCCC; cellpadding:3;cellspacing:3; bgcolor:#eeeeee; text-decoration: blink}
      span { font-size: 12px; color: red; }
      </style>
      <script>
      function taxis(x)
      {
      stylesheet=document.XSLDocument;
      source=document.XMLDocument;
      sortField=document.XSLDocument.selectSingleNode("//@order-by");
      sortField.value=x;
      Layer1.innerHTML=source.documentElement.transformNode(stylesheet);
      }
      </script>
      </head>
      <body>
      <p align="center"><span>XML卷之實戰錦囊(1):動態排序</span></p>
      <div id="Layer1" name="Layer1">
      <xsl:apply-templates select="BlueIdea" />
      </div>
      </body>
      </html>
      </xsl:template>
      <xsl:template match="BlueIdea">
      <table width="500" border="1" align="center" cellpadding="1" cellspacing="1" bordercolordark="#ffffff" bordercolorlight="#ADAAAD">
      <tr bgcolor="#FFCC99" align="center">
      <td style="cursor:s-resize" onClick="taxis('blue_ID')">編號</td>
      <td style="cursor:s-resize" onClick="taxis('blue_name')">姓名</td>
      <td style="cursor:s-resize" onClick="taxis('blue_text')">主題</td>
      <td style="cursor:s-resize" onClick="taxis('blue_time')">發表時間</td>
      <td style="cursor:s-resize" onClick="taxis('blue_class')">歸類</td>
      </tr>
      <xsl:apply-templates select="team" order-by="blue_ID"/>
      </table>
      </xsl:template>
      <xsl:template match="team">
      <tr align="center">
      <xsl:apply-templates select="blue_ID" />
      <xsl:apply-templates select="blue_name" />
      <xsl:apply-templates select="blue_text" />
      <xsl:apply-templates select="blue_time" />
      <xsl:apply-templates select="blue_class" />
      </tr>
      </xsl:template>
      <xsl:template match="blue_ID">
      <td bgcolor="#eeeeee">
      <xsl:value-of />
      </td>
      </xsl:template>
      <xsl:template match="blue_name">
      <td>
      <xsl:value-of />
      </td>
      </xsl:template>
      <xsl:template match="blue_text">
      <td>
      <xsl:value-of />
      </td>
      </xsl:template>
      <xsl:template match="blue_time">
      <td>
      <xsl:value-of />
      </td>
      </xsl:template>
      <xsl:template match="blue_class">
      <td>
      <xsl:value-of />
      </td>
      </xsl:template>
      </xsl:stylesheet>

      講解:

      1)paixu.xml 是數據文件,相信大家都不會有問題。

      2)paixu.xsl 是格式文件,有幾個地方要注意。

      (1)腳本中:

      sortField=document.XSLDocument.selectSingleNode("//@order-by");

      作用是:找到有屬性為order-by的第一個節點,因此它對應的節點就是

      <xsl:apply-templates select="team" order-by="blue_ID"/>

      因此在初次onLoad的時候order-by的value值是blue_ID

      而我們就是通過重新定義order-by的value值來達到排序的目的。

      Layer1.innerHTML=source.documentElement.transformNode(stylesheet);

      作用是:轉化XML數據后更改Layer1,因此在傳出參數'blue_name'后,

      <td style="cursor:s-resize" onClick="taxis('blue_name)">姓名</td>

      我們將order-by的value值修改為是'blue_name',即以'blue_name'為排序方式。

      繼而通過重新顯示Layer1的innerHTML值來顯示新的排序內容。

      (2)文本中

      order-by

      這個可不能少哦,不然就找不到了,效果嘛,你瞧瞧看吧!

      <?xml version="1.0" encoding="gb2312" ?>

      另外說一點:

      在大多的XML教科書中所顯示的代碼中很少會加上encoding="gb2312" ,

      因此我們在XML中用到中文的時候會報錯,原因就是沒有寫這個申明。

      后記:

      大家熟悉動態排序完成思路后會發現,其實我們的實現手法很簡單。

      就是修改order-by的數值,然后重新顯示。

      在動態查詢和動態分頁的功能中我們依然是按照這個思路去完成的。

      分享:應當如何使用XML語言
      首先要明確的是:XML是被設計用來存儲數據、攜帶數據和交換數據的,他不是為了顯示數據而設計的。   XML可以從HTML中分離數據   通過XML,你可以在HTML文件之外存儲數據。在不使用XML時

      來源:模板無憂//所屬分類:Xml教程/更新時間:2008-08-22
      相關Xml教程