分享
 
 
 

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

王朝other·作者佚名  2006-01-08
窄屏简体版  字體: |||超大  

动机:

排序功能让我们页面上的数据显的更人性化,是我们在网站上见过的很普遍的一个功能效果了。以往的自动排序都是用大量的脚本代码来完成的,对一般的爱好者来说这是件困难的事情。然而用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的数值,然后重新显示。

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

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有