|
| |
名片设计 CorelDRAW Illustrator AuotoCAD Painter 其他软件 Photoshop Fireworks Flash |
|
//初学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> 返回类别: 教程 上一教程: CSS:TEXT-SHADOW 下一教程: HTML语言剖析_多媒体标记 您可以阅读与"数据排序及如何动态排序"相关的教程: · 使用 xsl 对 xml 文档进行动态排序,分页显示的扩展 · 如何在HTML中引用XML数据 · 用XML在页面内刷新数据 · 网页中如何让整段文字左右对齐 · 利用XML不离开页面刷新数据 |
| 快精灵印艺坊 版权所有 |
首页 |
||