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

演艺招聘618

演艺招聘618

2016-02-19 17:17

清醒时做事,糊涂时读书,大怒时睡觉,无聊时关注图老师为大家准备的精彩内容。下面为大家推荐XML卷之实战锦囊(1)动态排序,无聊中的都看过来。

  (1):动态排序

  动机: 

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

  材料: 

  XML卷之动态排序

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

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

  作用: 

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

  代码: 

  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正则表达式在UBB论坛中的应用/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"/

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

  因此在初次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的数值,然后重新显示。

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

展开更多 50%)
分享

猜你喜欢

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

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

XML卷之实战锦囊(2)动态查询

Web开发
XML卷之实战锦囊(2)动态查询

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

XML卷之实战锦囊(3)动态分页

Web开发
XML卷之实战锦囊(3)动态分页

XML卷之实战锦囊(5)结构树图

Web开发
XML卷之实战锦囊(5)结构树图

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

XML卷之实战锦囊(5):结构树图

Web开发
XML卷之实战锦囊(5):结构树图

XML卷之实战锦囊(4)选单连动

Web开发
XML卷之实战锦囊(4)选单连动

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

思念愈来愈深的爱情 - QQ伤感分组

思念愈来愈深的爱情 - QQ伤感分组

如何映射/中断网络磁盘

如何映射/中断网络磁盘
下拉加载更多内容 ↓