//初學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>
