XML卷之实战锦囊(1)动态排序

【 tulaoshi.com - Web开发 】

　　（1）：动态排序

　　动机： 

　　排序功能让我们页面上的数据显的更人性化，是我们在网站上见过的很普遍的一个功能效果了。以往的自动排序都是用大量的脚本代码来完成的，对一般的爱好者来说这是件困难的事情。然而用XML来处理的话就简单多了。让自己的页面更加绚丽，哈哈，您是不是也心动了呢！ 

　　材料： 

　　XML卷之动态排序

　　有2个文件：paixu.xml  和 paixu.xsl 

　　作用： 

　　在不刷新页面的情况下更据用户自己的需要对数据重新进行排序显示，有效的提高数据互动功能，让自己的页面更加绚丽多彩。 效果：  

　　代码： 

　　paixu.xml 

？xml version="1.0" encoding="gb2312" ？？xml-stylesheet type="text/xsl" href="paixu.xsl" ？BlueIdea　  team　　  blue_ID1/blue_ID　　  blue_nameSailflying/blue_name　　  blue_text一个简单的排序/blue_text　　  blue_time2002-1-11 17:35:33/blue_time　　  blue_classXML专题/blue_class　  /team　  team　　  blue_ID2/blue_ID　　  blue_nameflyingbird/blue_name　　  blue_text嫁给你，是要你疼的/blue_text　　  blue_time2001-09-06 12:45:51/blue_time　　  blue_class灌水精华/blue_class　  /team　  team　　  blue_ID3/blue_ID　　  blue_name苛子/blue_name　　  blue_text正则表达式在ＵＢＢ论坛中的应用/blue_text　　  blue_time2001-11-23 21:02:16/blue_time　　  blue_classWeb 编程精华/blue_class　  /team　  team　　  blue_ID4/blue_ID　　  blue_name太乙郎/blue_name　　  blue_text年末经典分舵聚会完全手册 v0.1/blue_text　　  blue_time2000-12-08 10:22:48/blue_time　　  blue_class论坛灌水区/blue_class　  /team　  team　　  blue_ID5/blue_ID　　  blue_namemmkk/blue_name　　  blue_textAsp错误信息总汇/blue_text　　  blue_time2001-10-13 16:39:05/blue_time　　  blue_classjavascript脚本/blue_class　  /team/BlueIdea

　　paixu.xsl 

？xml version="1.0" encoding="gb2312" ？xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl"xsl:template match="/"htmlheadtitle XML卷之实战锦囊（1）：动态排序/titlestylebody,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; }/stylescriptfunction taxis(x) { stylesheet=document.XSLDocument; source=document.XMLDocument; sortField=document.XSLDocument.selectSingleNode("//@order-by");sortField.value=x; Layer1.innerHTML=source.documentElement.transformNode(stylesheet); }/script/headbodyp align="center"spanXML卷之实战锦囊（1）：动态排序/span/pdiv id="Layer1" name="Layer1"xsl:apply-templates select="BlueIdea" //div/body/html/xsl:templatexsl:template match="BlueIdea"table width="500" border="1" align="center" cellpadding="1" cellspacing="1" bordercolordark="#ffffff" bordercolorlight="#ADAAAD"tr bgcolor="#FFCC99" align="center"td style="cursor:s-resize" onClick="taxis('blue_ID')"编号/tdtd style="cursor:s-resize" onClick="taxis('blue_name')"姓名/tdtd style="cursor:s-resize" onClick="taxis('blue_text')"主题/tdtd style="cursor:s-resize" onClick="taxis('blue_time')"发表时间/tdtd style="cursor:s-resize" onClick="taxis('blue_class')"归类/td/trxsl:apply-templates select="team" order-by="blue_ID"//table/xsl:templatexsl:template match="team"tr align="center"xsl:apply-templates select="blue_ID" /xsl:apply-templates select="blue_name" /xsl:apply-templates select="blue_text" /xsl:apply-templates select="blue_time" /xsl:apply-templates select="blue_class" //tr/xsl:templatexsl:template match="blue_ID"td bgcolor="#eeeeee"xsl:value-of //td/xsl:templatexsl:template match="blue_name"tdxsl:value-of //td/xsl:templatexsl:template match="blue_text"tdxsl:value-of //td/xsl:templatexsl:template match="blue_time"tdxsl:value-of //td/xsl:templatexsl:template match="blue_class"tdxsl:value-of //td/xsl:template/xsl:stylesheet

　　讲解： 

　　1）paixu.xml 是数据文件，相信大家都不会有问题。

　　2）paixu.xsl 是格式文件，有几个地方要注意。 

　　（1）脚本中：

　　sortField=document.XSLDocument.selectSingleNode("//@order-by"); 

　　作用是：找到有属性为order-by的第一个节点，因此它对应的节点就是

xsl:apply-templates select="team" order-by="blue_ID"/

　　因此在初次onLoad的时候order-by的value值是blue_ID。

　　而我们就是通过重新定义order-by的value值来达到排序的目的。 

　　Layer1.innerHTML=source.documentElement.transformNode(stylesheet); 

　　作用是：转化XML数据后更改Layer1，因此在传出参数'blue_name'后， td style="cursor:s-resize" onClick="taxis('blue_name)"姓名/td我们将order-by的value值修改为是'blue_name'，即以'blue_name'为排序方式。

　　继而通过重新显示Layer1的innerHTML值来显示新的排序内容。

　　（2）文本中：

　　order-by

　　这个可不能少哦，不然就找不到了，效果嘛，你瞧瞧看吧！！ 

　　？xml version="1.0" encoding="gb2312" ？

　　另外说一点：

　　在大多的XML教科书中所显示的代码中很少会加上encoding= "gb2312" ，因此我们在XML中用到中文的时候会报错，原因就是没有写这个申明。

　　后记： 

　　大家熟悉动态排序完成思路后会发现，其实我们的实现手法很简单。

　　就是修改order-by的数值，然后重新显示。

　　在动态查询和动态分页的功能中我们依然是按照这个思路去完成的。