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>正则表达式在ＵＢＢ论坛中的应用</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的数值，然后重新显示。
在动态查询和动态分页的功能中我们依然是按照这个思路去完成的。
相关推荐
-
XML卷之实战锦囊（1）：动态排序
动机: 排序功能让我们页面上的数据显的更人性化,是我们在网站上见过的很普遍的一个功能效果了.以往的自动排序都是用大量的脚本代码来完成的,对一般的爱好者来说这是件困难的事情.然而用XML来处理的话就简单多了.让自己的页面更加绚丽,哈哈,您是不是也心动了呢! 材料: XML卷之动态排序有2个文件:paixu.xml 和 paixu.xsl 作用: 在不刷新页面的情况下更据用户自己的需要对数据重新进行排序显示,有效的提高数据互动功能,让自己的页面更加绚丽多彩. 效果: 浏览这里 代码: paixu
-
XML卷之实战锦囊（3）：动态分页
动机: 为了方便用户查看大批量数据,我们会用到动态分页,因此分页功能是我们在网站上见过的最普遍也是最常用的一个功能模块了.而以往的信息分页都是连接到数据库的,每一次点击都必须要后台数据库的支持.这样不但服务器的负担加重,而且严重的影响用户浏览的速度.试想,如果把分页的功能放到客户端,那会产生什么样的效果呢?呵呵,看看下面的设计吧! . 材料: XML卷之动态分页有2个文件:pages.xml 和 pages.xsl 作用: 把分页的功能放到客户端.在不刷新页面的情况下对数据进行过滤筛选,有效的提
-
XML卷之实战锦囊（2）：动态查询
动机: 查询功能是我们在网站上见过的最普遍也是最常用的一个功能模块了.以往的信息查询都是连接到数据库的,每一次点击都必须要后台数据库的支持.然而很多情况下用户往往只针对某一部分的数据进行操作,这样不但服务器的负担加重,而且严重的影响用户浏览的速度. 针对这种情况我们需要将用户需要的某一部分数据以XML的方式传递到客户端,用户对这些数据可以很方便的进行操作.既方便了用户,又减轻了服务器数据库的负担.何乐而不为呢!而且这项功能可以通用到其他众多模块,因此添加了这个动态查询功能. 材料: XML卷之动
-
XML卷之实战锦囊（5）：结构树图
动机: 最初想起做二叉树是因为需要做一个公司结构图. 以前的做法都是直接用图象软件画出来一个图片.很好看,但每次有变动后都需要重新画一个新的. 另一方面,网页上对线条的显示.布局相当局限.根据动态生成的数据进行排版.定位都相当困难, 而且在美观上也差强人意. 做了各种尝试以后,决定用XML+XSL作数据运算: 用VML来美化线条,用JAVASCRIPT来给对象定位. 材料: XML卷之结构树图有2个文件:flow2.xml 和 flow2.xsl 效果: 浏览这里 讲解: 二叉树思路(1)
-
XML卷之实战锦囊（4）：选单连动
动机: 现在我们做个在IE里应用XML的一个小例子:解决双下拉选单的连动问题.大家最常见的可能就是选取省份后改变城市选项的例子了,那我们就来尝试着用XML来完成吧. 以前介绍的一些功能我是直接用XML+XSL文件来完成的,大家可能还不是很熟悉它的用法,所以我这次就用HMTL+XML来做,希望能够让大家更清楚的了解--"XML原来可以如此简单!":) 材料: XML卷之选单连动有2个文件:Citys.xml 和 CitySelect.htm 作用: 选择省份后可以自动显示相对应的城市,这
-
Mybatis实现动态排序方式
目录 Mybatis实现动态排序 Mybatis动态排序不生效问题 造成问题原因 解决办法 Mybatis实现动态排序 在数据展示时,很有可能碰到,需要动态排序的需求.当数据比较少的时候,还可以前端排序,但是,当数据非常大,尤其是涉及到分页的时候,就必须要用后端解决了. 以下,提供一种后端动态排序解决方案. 比如,现在我要查询用户信息(User)表. 可以在查询时,接口中,多添加两个字段. orderField(排序列) orderType(排序规则,升降序) 之后,在mapper.xml中的查
-
SpringBoot开发实战系列之动态定时任务
目录 前言 代码编写 效果演示 启动 修改 停止 后记 前言 定时器是我们项目中经常会用到的,SpringBoot使用@Scheduled注解可以快速启用一个简单的定时器(详情请看我们之前的博客<SpringBoot系列--定时器>),然而这种方式的定时器缺乏灵活性,如果需要对定时器进行调整,需要重启项目才生效,本文记录SpringBoot如何灵活配置动态定时任务 代码编写 首先先建表,重要字段:唯一表id.Runnable任务类.Cron表达式,其他的都是一些额外补充字段 DROP TABL
-
Python编程实现超炫动态排序图
目录 用 python 制作超燃动态排序视频 1,数据预处理 2,图表绘制 3,制作的图表转化为视频.动画 用 python 制作超燃动态排序视频 在开始之前,先贴张图,之前网上一段时间下面这种排序风格视频很火,下面这张图当作是视频其中的一帧. 制作这样视频的原理:就是把不同的帧组合在一起拼接成视频:把不同时间的排序图拼接在一起,拼接在一起形成一个随时间快速变化的动画,转化成视频,为了观看效果加一首很燃的BGM,最后的效果很赞. 这种视频 python 也能做,基本上分为三大部分,主要用到的就是
-
Python利用pynimate实现制作动态排序图
数据可视化动画还在用 Excel 做?今天分享一个简单的 Python 包就能分分钟搞定! 而且生成的动画也足够丝滑,效果是酱紫的: 这是一位专攻 Python 语言的程序员开发的安装包,名叫Pynimate. 目前可以直接通过PyPI安装使用. 使用指南 想要使用 Pynimate,直接import一下就行. import pynimate as nim 输入数据后,Pynimate将使用函数Barplot()来创建条形数据动画. 而创建这种动画,输入的数据必须是pandas数据结构(如下),
-
PHP实现动态创建XML文档的方法
本文实例讲述了PHP实现动态创建XML文档的方法.分享给大家供大家参考,具体如下: 一. 代码 conn.php <?php $id=mysql_connect("localhost","root","root") or die('数据库连接失败:' . mysql_error()); if(mysql_select_db("db_database26",$id)) echo ""; else ech