這時就該讓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>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
