搜尋
首頁後端開發XML/RSS教程XML卷之實戰錦囊(1):動態排序

XML卷之實戰錦囊(1):動態排序

Feb 10, 2017 pm 04:09 PM
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

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

(1)腳本中:

sortField=document.XSLDocument.selectSingleNode("//@order-by");
作用是:找到有屬性為order-by的第一個節點,因此它對應的節點就是

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

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

<?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>
<p id="Layer1" name="Layer1">
<xsl:apply-templates select="BlueIdea" />
</p>
</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(&#39;blue_ID&#39;)">编号</td>
<td style="cursor:s-resize" onClick="taxis(&#39;blue_name&#39;)">姓名</td>
<td style="cursor:s-resize" onClick="taxis(&#39;blue_text&#39;)">主题</td>
<td style="cursor:s-resize" onClick="taxis(&#39;blue_time&#39;)">发表时间</td>
<td style="cursor:s-resize" onClick="taxis(&#39;blue_class&#39;)">归类</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>


作用是:轉換XML資料後更改Layer1,因此在傳出參數'blue_name'後,

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


我們將order-by的value值修改為是'blue_name',即以'blue_name'為排序方式。
繼而透過重新顯示Layer1的innerHTML值來顯示新的排序內容。

(2)文字中:

order-by

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

<td style="cursor:s-resize" onClick="taxis(&#39;blue_name)">姓名</td>

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

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

 

後記:

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

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

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



以上就是XML卷之實戰錦囊(1):動態排序的內容,更多相關內容請關注PHP中文網(www.php.cn)!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
XML中的RSS:解碼標籤,屬性和結構XML中的RSS:解碼標籤,屬性和結構Apr 24, 2025 am 12:09 AM

RSS是一種基於XML的格式,用於發布和訂閱內容。 RSS文件的XML結構包括根元素、元素和多個元素,每個代表一個內容條目。通過XML解析器讀取和解析RSS文件,用戶可以訂閱並獲取最新內容。

XML在RSS中的優勢:技術深度潛水XML在RSS中的優勢:技術深度潛水Apr 23, 2025 am 12:02 AM

XML在RSS中具有結構化數據、可擴展性、跨平台兼容性和解析驗證的優勢。 1)結構化數據確保內容的一致性和可靠性;2)可擴展性允許添加自定義標籤以適應內容需求;3)跨平台兼容性使其在不同設備上無縫工作;4)解析和驗證工具確保Feed的質量和完整性。

XML中的RSS:揭示內容聯合的核心XML中的RSS:揭示內容聯合的核心Apr 22, 2025 am 12:08 AM

RSS在XML中的實現方式是通過結構化的XML格式來組織內容。 1)RSS使用XML作為數據交換格式,包含頻道信息和項目列表等元素。 2)生成RSS文件需按規範組織內容,發佈到服務器供訂閱。 3)RSS文件可通過閱讀器或插件訂閱,實現內容自動更新。

超越基礎:高級RSS文檔功能超越基礎:高級RSS文檔功能Apr 21, 2025 am 12:03 AM

RSS的高級功能包括內容命名空間、擴展模塊和條件訂閱。 1)內容命名空間擴展RSS功能,2)擴展模塊如DublinCore或iTunes添加元數據,3)條件訂閱根據特定條件篩選條目。這些功能通過添加XML元素和屬性實現,提升信息獲取效率。

XML主鏈:RSS提要如何結構XML主鏈:RSS提要如何結構Apr 20, 2025 am 12:02 AM

RSSFEEDSUSEXMLTOSSTRUCTURECONTUPDATE.1)XMLPROVIDEDIDESAHIERARCHICALSTRUCTUREFFORDATA.2)THEELEMENTDEFINESTHEEFEED'SIDENTITYANDCONTAINS ELEMENT.3)ELEMENTEMERPREPRESERPRESENTERPRESENTIVIDIVIVELPIECTUALPIECES.4)RSSSSSSSSSSSISEXTEXTENSIBLERECTICERSINCREECTINCERINCTICENT.5)

RSS和XML:了解Web內容的動態二重奏RSS和XML:了解Web內容的動態二重奏Apr 19, 2025 am 12:03 AM

RSS和XML是用於網絡內容管理的工具。 RSS用於發布和訂閱內容,XML用於存儲和傳輸數據。它們的工作原理包括內容髮布、訂閱和更新推送。使用示例包括RSS發布博客文章和XML存儲書籍信息。

RSS文檔:Web聯合組織的基礎RSS文檔:Web聯合組織的基礎Apr 18, 2025 am 12:04 AM

RSS文檔是基於XML的結構化文件,用於發布和訂閱頻繁更新的內容。它的主要作用包括:1)自動化內容更新,2)內容聚合,3)提高瀏覽效率。通過RSSfeed,用戶可以訂閱並及時獲取來自不同來源的最新信息。

解碼RSS:內容提要的XML結構解碼RSS:內容提要的XML結構Apr 17, 2025 am 12:09 AM

RSS的XML結構包括:1.XML聲明和RSS版本,2.頻道(Channel),3.條目(Item)。這些部分構成了RSS文件的基礎,允許用戶通過解析XML數據來獲取和處理內容信息。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

VSCode Windows 64位元 下載

VSCode Windows 64位元 下載

微軟推出的免費、功能強大的一款IDE編輯器

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強大的PHP整合開發環境

MantisBT

MantisBT

Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

mPDF

mPDF

mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),