數據排序及如何動態排序

2019-11-18 21:13:59

字體：大中小

來源：轉載

供稿：網友

數據排序及如何動態排序

//Belltree
//http://www.lurer.net/

//初學xml,錯誤之處多多,各路高手多多指正

在<xsl:for-each select="//item" order-by="text()">及<xsl:apply-templates select="//item"/>中都可以看到
order-by屬性,該屬性可以對選出來的節點按照order-by的值進行排序.

<singer>
<title>Christina Aguilera</title>
<songs>
<item id="0" href="genieinabottle.christina.xml">Genie in a bottle</item>
<item id="1" href="whatagirlwants.christina.xml">What a girl wants</item>
<item id="2" href="iturntoyou.christina.xml">I turn to you</item>
<item id="5" href="soemotional.christina.xml">So emotional</item>
<item id="4" href="comeonover.christina.xml">Come on over</item>
<item id="3" href="reflection.christina.xml">Reflection</item>
<item id="6" href="lovefor.christina.xml">Love for all seasons</item>
<item id="7" href="somebody.christina.xml">Somebody's somebody</item>
<item id="10" href="puturhands.christina.xml">When you put your hands on me</item>
<item id="9" href="blessed.christina.xml">Blessed</item>
<item id="8" href="lovefindaway.christina.xml">Love will find a way</item>
<item id="11" href="obvious.christina.xml">obvious</item>
</songs>
</singer>

在這個例子中,如果我們需要一個按照歌名進行排序的列表,可以使用如下XSL:

<xsl:for-each select="//item" order-by="text()">
<a><xsl:attribute name="href"><xsl:value-of select="@href"/></xsl:attribute><xsl:value-of /></a>
<br/>
</xsl:for-each>

這樣就按照每個item節點的值進行了排序,還可以使用id屬性來排序,只要將order-by="text()"改為oder-by="@id"即可.

但如果我們需要讓用戶自己選擇如何排序,甚至是不排序,即按照原始順序.

這時就該讓script和XML DOM上場了,在DOM中,有一系列的Methods和Attributes讓你設置,你可以重新生成一棵樹,我們就可
以利用這些東東將order-by屬性的值改掉,然后再重新利用這個XSL節點對你需要的節點數據重新生成一棵樹,這棵樹是排序
了的,注意,order-by的值可不是原來的了,是你的新值.你甚至可以將order-by屬性從XSL節點屬性中去掉,這樣生成的樹就
是按照原始順序了.

看看相應的XML DOM Methods:
selectSingleNode   返回單個節點
setAttribute       設置屬性值,如果屬性不存在,創建它并設置值
removeAttribute    移去屬性
transformNode      使用相應的XSL stylesheet對該節點及其字節點進行處理后,返回一個結果樹

最開始,我們要將XSL中的xsl:for-each節點選出來,并將它賦予一個變量s,好對它進行處理:
var s = document.XSLDocument.selectSingleNode("//xsl:for-each")

然后,對它的屬性order-by的值從新設置:
setAttribute("order-by",key);  //key為一個變量,可以為id,text()

或者,將其刪去:
removeAttribute("order-by");

哈哈,很簡單吧

我們現在來看看源樹中需要排序的部分,是singer/songs節點中的每個item節點,不需要選擇整個樹,只要singer/songs就可
以了

var xmldoc = document.XMLDocument.selectSingleNode("singer/songs");

將整個XSL樹應用該節點:

divItems.innerHTML = xmldoc.transformNode(document.XSLDocument);  //錯誤來了

是不是要對這個節點應用整個XSL樹呢?當然不必,這樣也會帶來錯誤,應為結果必須顯示在某個地方,我們回頭來看一看:
<xsl:template match="/">
<div id="divItems">
<div id="in">

<xsl:for-each select="//item" order-by="id">
<a><xsl:attribute name="href"><xsl:value-of select="@href"/></xsl:attribute><xsl:value-of /></a>
<br/>
</xsl:for-each>

</div>
</div>
</xsl:template>
我們在<xsl:for-each>的用<div>容器包住,為什么要用兩個<div>呢,這個后面說明,先來看看transformNode,應用整個XSL
樹會帶來什么后果,這樣又會重新生成一個<div id="divItems">...</div>,就會導致兩個同id的div,結果是無法運行.

我們只需要選<div id="in">這個節點就夠了.

var xsldoc = document.XSLDocument.selectSingleNode("//div[@id='in']");

然后將xsldoc應用到xmldoc上就成了

divItems.innerHTML = xmldoc.transformNode(xsldoc);

兩個div還是有用的吧,第一個是一個顯示結果的容器,第二個每次都包含在結果樹中,如果沒有<div id="in">直接選<div
id="divItems">就會出現和應用整個XSL樹一樣的錯誤.

最后,還是看看完整的:(具體效果請看http://go8.163.com/~belltree/test.xml)
XML:
<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="test.xsl"?>

<singer>
<title>Christina Aguilera</title>
<songs>
<item id="0" href="genieinabottle.christina.xml">Genie in a bottle</item>
<item id="1" href="whatagirlwants.christina.xml">What a girl wants</item>
<item id="2" href="iturntoyou.christina.xml">I turn to you</item>
<item id="3" href="soemotional.christina.xml">So emotional</item>
<item id="4" href="comeonover.christina.xml">Come on over</item>
<item id="5" href="reflection.christina.xml">Reflection</item>
<item id="6" href="lovefor.christina.xml">Love for all seasons</item>
<item id="7" href="somebody.christina.xml">Somebody's somebody</item>
<item id="8" href="puturhands.christina.xml">When you put your hands on me</item>
<item id="9" href="blessed.christina.xml">Blessed</item>
<item id="10" href="lovefindaway.christina.xml">Love will find a way</item>
<item id="11" href="obvious.christina.xml">obvious</item>
</songs>
</singer>

XSL:
<?xml version="1.0" encoding="gb2312"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">

<xsl:template match="/">

<html>
<script language="javascript">
<xsl:comment>
function sort(key) {
  // Find the "for-each" attributes in the style sheet.
  var s = document.XSLDocument.selectSingleNode("//xsl:for-each");

  if (key=="")
  s.removeAttribute("order-by");
  else
  s.setAttribute("order-by",key);

  // Find the subset of the document we need to update.
  var xmldoc = document.XMLDocument.selectSingleNode("singer/songs");
  var xsldoc = document.XSLDocument.selectSingleNode("//div[@id='in']");

  // Apply the style sheet to the subset, and update the display.
  divItems.innerHTML = xmldoc.transformNode(xsldoc);
}

</xsl:comment>
</script>
<body>
<table border="1" cellspacing="0" cellpadding="1">
<tr><td>
<div id="divItems">
<div id="in">

<xsl:for-each select="//item" order-by="@id">
<a><xsl:attribute name="href"><xsl:value-of select="@href"/></xsl:attribute><xsl:value-of /></a>
<br/>
</xsl:for-each>

</div>
</div>
</td><td>
<input type="button" value=" Text " onClick="sort('text()')"/>
<input type="button" value=" @id " onClick="sort('@id')"/>
<input type="button" value="Origin" onClick="sort('')"/>
</td></tr>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>

上一篇：將HTML表單數據存儲為XML格式

下一篇：連接各種數據庫的代碼的總結