选择显示字体大小

xml卷之实战锦囊(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_id>1</blue_id>
    <blue_name>sailflying</blue_name>
    <blue_text>一个简单的排序</blue_text>
    <blue_time>2002-1-11 17:35:33</blue_time>
    <blue_class>xml专题</blue_class>
  </team>
  <team>
    <blue_id>2</blue_id>
    <blue_name>flyingbird</blue_name>
    <blue_text>嫁给你,是要你疼的</blue_text>
    <blue_time>2001-09-06 12:45:51</blue_time>
    <blue_class>灌水精华</blue_class>
  </team>
  <team>
    <blue_id>3</blue_id>
    <blue_name>苛子</blue_name>
    <blue_text>正则表达式在ubb论坛中的应用</blue_text>
    <blue_time>2001-11-23 21:02:16</blue_time>
    <blue_class>web 编程精华</blue_class>
  </team>
  <team>
    <blue_id>4</blue_id>
    <blue_name>太乙郎</blue_name>
    <blue_text>年末经典分舵聚会完全手册 v0.1</blue_text>
    <blue_time>2000-12-08 10:22:48</blue_time>
    <blue_class>论坛灌水区</blue_class>
  </team>
  <team>
    <blue_id>5</blue_id>
    <blue_name>mmkk</blue_name>
    <blue_text>asp错误信息总汇</blue_text>
    <blue_time>2001-10-13 16:39:05</blue_time>
    <blue_class>javascript脚本</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="/">
<html>
<head>
<title> xml卷之实战锦囊(1):动态排序</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>
<script>
function taxis(x)
{
stylesheet=document.xsldocument;
source=document.xmldocument;
sortfield=document.xsldocument.selectsinglenode("//@order-by");
sortfield.value=x;
layer1.innerhtml=source.documentelement.transformnode(stylesheet);
}
</script>
</head>
<body>
<p align="center"><span>xml卷之实战锦囊(1):动态排序</span></p>
<div id="layer1" name="layer1">
<xsl:apply-templates select="blueidea" />
</div>
</body>
</html>
</xsl:template>
<xsl: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')">编号</td>
<td style="cursor:s-resize" onclick="taxis('blue_name')">姓名</td>
<td style="cursor:s-resize" onclick="taxis('blue_text')">主题</td>
<td style="cursor:s-resize" onclick="taxis('blue_time')">发表时间</td>
<td style="cursor:s-resize" onclick="taxis('blue_class')">归类</td>
</tr>
<xsl:apply-templates select="team" order-by="blue_id"/>
</table>
</xsl:template>
<xsl: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:template>
<xsl:template match="blue_id">
<td bgcolor="#eeeeee">
<xsl:value-of />
</td>
</xsl:template>
<xsl:template match="blue_name">
<td>
<xsl:value-of />
</td>
</xsl:template>
<xsl:template match="blue_text">
<td>
<xsl:value-of />
</td>
</xsl:template>
<xsl:template match="blue_time">
<td>
<xsl:value-of />
</td>
</xsl:template>
<xsl:template match="blue_class">
<td>
<xsl: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的数值,然后重新显示。
在动态查询和动态分页的功能中我们依然是按照这个思路去完成的。 


 


关键字 本文所属关键字

相关 与本文相关文章

分类 所有文章关键字导航

源码编程相关

Java   Asp   PHP   .Net   XML   C/C++   CGI   VB   Jsp   J2ee   J2se   J2me   EJB   Servlet   Tomcat   Resin   Struts   Weblogic   Eclipse   ANT   GUI   JMS   Web servise   IDEA   Webphere   Hibernate   Spring   Jboss   Applet   Swing   Socket   Javamail   Perl   Ajax   P2P   安全   模式   框架   测试   开源   游戏

SQL数据库相关

My-SQL   Ms-SQL   Access   DB2   Oracle   Sybase   SQLserver   索引   存储过程   加密   数据库   分页   视图  

手机无线相关

3G   Wap   CDMA   GRPS   GSM   IVR   彩信   短信   无线   增值业务

网页设计制作相关

HTML   CSS   网页配色   网页特效   Javascript   VBscript   Dreamweaver   Frontpage   JS   Web   网站设计

网站建设推广相关

建站经验   网站优化   网站排名   推广   Alexa

操作系统/服务器相关

Windows XP   Windows 2000   Windows 2003   Windows Me   Windows 9.x   Linux   UNIX   注册表   操作系统   服务器   应用服务器

图形图像多媒体相关

Photoshop   Fireworks   Flash   Coreldraw   Illustrator   Freehand   Photoimpact   多媒体   图形图像

标准 网站致力的规范

Valid CSS!

无不良内容,无不良广告,无恶意代码

Valid XHTML 1.0 Transitional

creativecommons