Power by DMForum.NET!
RSS | ATOM | WAP
DMForum.NET 官方支持讨论区 > 技术区 > XML应用

浏览主题:[转]XML卷之动态排序

主题:[转]XML卷之动态排序
尤里
普通会员
4级
等级:职业侠客
发帖:237
金钱:10
经验:658
性别:帅哥
状态:离线
注册:2006-7-30 10:39:00
[转]XML卷之动态排序  
[ 2006-8-4 16:28:00 ]
看这里这么冷清,咱就转了一贴过来
我想在这里跟大家交流一下自己收藏的一些学习资料及学习体会!! 

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中用到中文的时候会报错,原因就是没有写这个申明。
多啦A梦
(靓仔)
普通会员
5级
等级:战士
发帖:179
金钱:660
经验:2552
性别:帅哥
状态:离线
注册:2006-7-29 23:38:00
RE:[转]XML卷之动态排序  
[ 2006-8-4 18:33:00 ]
程序代码 (html)

看这里这么冷清,咱就转了一贴过来
我想在这里跟大家交流一下自己收藏的一些学习资料及学习体会!! 

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> 
<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中用到中文的时候会报错,原因就是没有写这个申明。
孤星
(冥冥暗夜 茕茕孤星)
普通会员
3级
等级:护卫
发帖:62
金钱:115
经验:914
性别:帅哥
状态:离线
注册:2006-8-3 15:52:00
RE:[转]XML卷之动态排序  
[ 2006-8-5 11:44:00 ]
汗,这里有几个人在用xml的时候还在用encoding="gb2312"
-_-!!
尤里
普通会员
4级
等级:职业侠客
发帖:237
金钱:10
经验:658
性别:帅哥
状态:离线
注册:2006-7-30 10:39:00
RE:[转]XML卷之动态排序  
[ 2006-8-5 12:14:00 ]
偶只是转贴.其实我不懂技术.

回到顶部
Powered by DMForum.NET  1.4 Beta . URIMAP enabled. DEBUG enabled.
Copyright © 2003-2006 Devms.Com. All rights reserved.