数据排序及如何动态排序

数据排序及如何动态排序

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

//初学XML,错误之处多多,各路高手多多指正

  1<xsl:for-each order-by="text()" select="//item">及<xsl:apply-templates select="//item"></xsl:apply-templates>中都可以看到   
  2order-by属性,该属性可以对选出来的节点按照order-by的值进行排序.   
  3  
  4<singer>
  5<title>Christina Aguilera</title>
  6<songs>
  7<item href="genieinabottle.christina.xml" id="0">Genie in a bottle</item>
  8<item href="whatagirlwants.christina.xml" id="1">What a girl wants</item>
  9<item href="iturntoyou.christina.xml" id="2">I turn to you</item>
 10<item href="soemotional.christina.xml" id="5">So emotional</item>
 11<item href="comeonover.christina.xml" id="4">Come on over</item>
 12<item href="reflection.christina.xml" id="3">Reflection</item>
 13<item href="lovefor.christina.xml" id="6">Love for all seasons</item>
 14<item href="somebody.christina.xml" id="7">Somebody's somebody</item>
 15<item href="puturhands.christina.xml" id="10">When you put your hands on me</item>
 16<item href="blessed.christina.xml" id="9">Blessed</item>
 17<item href="lovefindaway.christina.xml" id="8">Love will find a way</item>
 18<item href="obvious.christina.xml" id="11">obvious</item>
 19</songs>
 20</singer>   
 21  
 22在这个例子中,如果我们需要一个按照歌名进行排序的列表,可以使用如下XSL:   
 23  
 24<xsl:for-each order-by="text()" select="//item">
 25<a><xsl:attribute name="href"><xsl:value-of select="@href"></xsl:value-of></xsl:attribute><xsl:value-of></xsl:value-of></a>
 26</xsl:for-each>   
 27  
 28这样就按照每个item节点的值进行了排序,还可以使用id属性来排序,只要将order-by="text()"改为oder-by="@id"即可.   
 29  
 30但如果我们需要让用户自己选择如何排序,甚至是不排序,即按照原始顺序.   
 31  
 32这时就该让script和XML DOM上场了,在DOM中,有一系列的Methods和Attributes让你设置,你可以重新生成一棵树,我们就可   
 33以利用这些东东将order-by属性的值改掉,然后再重新利用这个XSL节点对你需要的节点数据重新生成一棵树,这棵树是排序   
 34了的,注意,order-by的值可不是原来的了,是你的新值.你甚至可以将order-by属性从XSL节点属性中去掉,这样生成的树就   
 35是按照原始顺序了.   
 36  
 37看看相应的XML DOM Methods:   
 38selectSingleNode 返回单个节点   
 39setAttribute 设置属性值,如果属性不存在,创建它并设置值   
 40removeAttribute 移去属性   
 41transformNode 使用相应的XSL stylesheet对该节点及其字节点进行处理后,返回一个结果树   
 42  
 43最开始,我们要将XSL中的xsl:for-each节点选出来,并将它赋予一个变量s,好对它进行处理:   
 44var s = document.XSLDocument.selectSingleNode("//xsl:for-each")   
 45  
 46然后,对它的属性order-by的值从新设置:   
 47setAttribute("order-by",key); //key为一个变量,可以为id,text()   
 48  
 49或者,将其删去:   
 50removeAttribute("order-by");   
 51  
 52哈哈,很简单吧   
 53  
 54我们现在来看看源树中需要排序的部分,是singer/songs节点中的每个item节点,不需要选择整个树,只要singer/songs就可   
 55以了   
 56  
 57var xmldoc = document.XMLDocument.selectSingleNode("singer/songs");   
 58  
 59将整个XSL树应用该节点:   
 60  
 61divItems.innerHTML = xmldoc.transformNode(document.XSLDocument); //错误来了   
 62  
 63是不是要对这个节点应用整个XSL树呢?当然不必,这样也会带来错误,应为结果必须显示在某个地方,我们回头来看一看:   
 64<xsl:template match="/">
 65<div id="divItems">
 66<div id="in">
 67<xsl:for-each order-by="id" select="//item">
 68<a><xsl:attribute name="href"><xsl:value-of select="@href"></xsl:value-of></xsl:attribute><xsl:value-of></xsl:value-of></a>
 69</xsl:for-each>
 70</div>
 71</div>
 72</xsl:template>   
 73我们在<xsl:for-each>的用<div>容器包住,为什么要用两个<div>呢,这个后面说明,先来看看transformNode,应用整个XSL   
 74树会带来什么后果,这样又会重新生成一个<div id="divItems">...</div>,就会导致两个同id的div,结果是无法运行.   
 75  
 76我们只需要选<div id="in">这个节点就够了.   
 77  
 78var xsldoc = document.XSLDocument.selectSingleNode("//div[@id='in']");   
 79  
 80然后将xsldoc应用到xmldoc上就成了   
 81  
 82divItems.innerHTML = xmldoc.transformNode(xsldoc);   
 83  
 84两个div还是有用的吧,第一个是一个显示结果的容器,第二个每次都包含在结果树中,如果没有<div id="in">直接选<div id="divItems">就会出现和应用整个XSL树一样的错误.   
 85  
 86最后,还是看看完整的:(具体效果请看http://go8.163.com/~belltree/test.xml)   
 87XML:   
 88<?xml version="1.0"?>
 89<?xml-stylesheet type="text/xsl" href="test.xsl"?>
 90<singer>
 91<title>Christina Aguilera</title>
 92<songs>
 93<item href="genieinabottle.christina.xml" id="0">Genie in a bottle</item>
 94<item href="whatagirlwants.christina.xml" id="1">What a girl wants</item>
 95<item href="iturntoyou.christina.xml" id="2">I turn to you</item>
 96<item href="soemotional.christina.xml" id="3">So emotional</item>
 97<item href="comeonover.christina.xml" id="4">Come on over</item>
 98<item href="reflection.christina.xml" id="5">Reflection</item>
 99<item href="lovefor.christina.xml" id="6">Love for all seasons</item>
100<item href="somebody.christina.xml" id="7">Somebody's somebody</item>
101<item href="puturhands.christina.xml" id="8">When you put your hands on me</item>
102<item href="blessed.christina.xml" id="9">Blessed</item>
103<item href="lovefindaway.christina.xml" id="10">Love will find a way</item>
104<item href="obvious.christina.xml" id="11">obvious</item>
105</songs>
106</singer>   
107  
108XSL:   
109<?xml version="1.0" encoding="gb2312"?>
110<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
111<xsl:template match="/">
112<html>
113<script language="javascript">   
114<xsl:comment>   
115function sort(key) {   
116// Find the "for-each" attributes in the style sheet.   
117var s = document.XSLDocument.selectSingleNode("//xsl:for-each");   
118  
119if (key=="")   
120s.removeAttribute("order-by");   
121else   
122s.setAttribute("order-by",key);   
123  
124// Find the subset of the document we need to update.   
125var xmldoc = document.XMLDocument.selectSingleNode("singer/songs");   
126var xsldoc = document.XSLDocument.selectSingleNode("//div[@id='in']");   
127  
128// Apply the style sheet to the subset, and update the display.   
129divItems.innerHTML = xmldoc.transformNode(xsldoc);   
130}   
131  
132  
133</xsl:comment>   
134</script>
135<body>
136<table border="1" cellpadding="1" cellspacing="0">
137<tr><td>
138<div id="divItems">
139<div id="in">
140<xsl:for-each order-by="@id" select="//item">
141<a><xsl:attribute name="href"><xsl:value-of select="@href"></xsl:value-of></xsl:attribute><xsl:value-of></xsl:value-of></a>
142</xsl:for-each>
143</div>
144</div>
145</td><td>
146<input onclick="sort('text()')" type="button" value=" Text "/>
147<input onclick="sort('@id')" type="button" value=" @id "/>
148<input onclick="sort('')" type="button" value="Origin"/>
149</td></tr>
150</table>
151</body>
152</html>
153</xsl:template>
154</xsl:stylesheet></div></div></div></div></div></xsl:for-each></xsl:for-each>
Published At
Categories with Web编程
Tagged with
comments powered by Disqus