但如果我们需要让用户自己选择如何排序,甚至是不排序,即按照原始顺序.
这时就该让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>
这时就该让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>