动机: 排序功能让我们页面上的数据显的更人性化,是我们在网站上见过的很普遍的一个功能效果了。以往的自动排序都是用大量的脚本代码来完成的,对一般的爱好者来说这是件困难的事情。然而用XML来处理的话就简单多了。让自己的页面更加绚丽,哈哈,您是不是也心动了呢!
材料: XML卷之动态排序 有2个文件:one.xml 和 one1.xsl
作用: 在不刷新页面的情况下更据用户自己的需要对数据重新进行排序显示,有效的提高数据互动功能,让自己的页面更加绚丽多彩。
|
|
代码:
one.xml | <?xml version="1.0" encoding="utf-8" ?> <Department> <Employee id="1" name="Chaoyang" age="23" phone="1387144345*" address="武汉 net"> 2005年7月1日,毕业一周年纪念日!缅怀过去... </Employee> <Employee id="2" name="Yang.Chao" age="100" phone="1345624345*" address="北京 net"> 2005年7月1日,毕业一周年纪念日!缅怀过去... </Employee> <Employee id="3" name="CSDN" age="43" phone="138753845*" address="美国"> 2005年7月1日,毕业一周年纪念日!缅怀过去... </Employee> <Employee id="4" name="Leeyoung" age="25" phone="1250644345*" address="深圳"> 2005年7月1日,毕业一周年纪念日!缅怀过去... </Employee> <Employee id="5" name="XiaoGuiDangJia" age="29" phone="14581345*" address="广州"> 2005年7月1日,毕业一周年纪念日!缅怀过去... </Employee> </Department>
|
one.xsl | <?xml version="1.0" encoding="UTF-8"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="Department"> <html> <head> <title>XSLT XML</title> <style> body,BlueIdea,team,blue_ID,blue_name,blue_text,blue_time,blue_class{ font: 12px "ËÎÌå", "Arial", "Times New Roman"; } table { font-size: 12px; border: 0px double; border-color: #99CC99 #99CC99 #CCCCCC #CCCCCC; cellpadding:3;cellspacing:3; bgcolor:#eeeeee; text-decoration: blink} span { font-size: 12px; color: red; } </style> </head> <body> <html> <table border="1" align="center" cellpadding="1" cellspacing="1" bordercolordark="#cc9999" bordercolorlight="#9999cc"> <tr bgcolor="#eeee99"> <td>id</td> <td>name</td> <td>age</td> <td>phone</td> <td>address</td> <td>description</td> </tr> <xsl:for-each select= "Employee"> <xsl:sort select="@address"/> <tr> <td><xsl:value-of select="@id"/></td> <td><xsl:value-of select="@name"/></td> <td><xsl:value-of select="@age"/></td> <td><xsl:value-of select="@phone"/></td> <td><xsl:value-of select="@address"/></td> <td><xsl:value-of select="."/></td> </tr> </xsl:for-each> </table> </html> </body> &l 9fdd t;/html> </xsl:template> <!-- *** Define a 模板 *** -->
</xsl:stylesheet>
| 讲解:
1)one.xml 是数据文件,相信大家都不会有问题。 2)one.xsl 是格式文件,有几个地方要注意。 | (1)取属性值的用法,用的是@,如<xsl:value-of select="@id"/>。 (2)sort函数的用法:如<xsl:sort select="@address"/>,其中@address可以替换为元素Employee属性的任一属性。得到的结果是不同的。
至于效果嘛,你瞧瞧看吧!!
<?xml version="1.0" encoding="utf-8" ?> 另外说一点: 在大多的XML教科书中所显示的代码中很少会加上encoding="utf-8" ,可以解决中文显示问题。
| 后记: 大家熟悉动态排序完成思路后会发现,其实我们的实现手法很简单。 就是修改<xsl:sort select="@address"/>的数值,然后重新显示。
|
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理