以文本方式查看主题

-  中文XML论坛 - 专业的XML技术讨论区  (http://bbs.xml.org.cn/index.asp)
--  『 XML源码及示例(仅原创和转载) 』  (http://bbs.xml.org.cn/list.asp?boardid=32)
----  请看XML+XSL+JS排序问题  (http://bbs.xml.org.cn/dispbbs.asp?boardid=32&rootid=&id=22532)

--  作者：QimiQ
--  发布时间：9/26/2005 9:46:00 AM

--  请看XML+XSL+JS排序问题
大家来帮忙解决这个问题吧:

目的:为了让它实现每当用鼠标点选"编号" "姓名" "主题" "时间" "归类"时,不必刷新就可进很排序.

问题:如何让下边这个例子实现点选标题来排序,目前只实现单排排序,要使其它排排序还得刷新.(请用   Js+xsl+xml   来实现)

源文件代码:

XML代码

(保存为paixu1.xml)

<?xml version="1.0" encoding="gb2312" ?>
<?xml-stylesheet type="text/xsl" href="paixu1.xsl" ?>
<root>
<head>
  <col_1>编号</col_1>
    <col_2>姓名</col_2>
    <col_3>主题</col_3>
    <col_4>时间</col_4>
    <col_5>归类</col_5>
</head>
  <id>
    <col_1>1</col_1>
    <col_2>Mr.Wang</col_2>
    <col_3>动态查询</col_3>
    <col_4>2005-9-18 17:35:33</col_4>
    <col_5>XML专题</col_5>
  </id>
  <id>
    <col_1>2</col_1>
    <col_2>Mr.Lee</col_2>
    <col_3>C Program</col_3>
    <col_4>2005-9-06 12:45:51</col_4>
    <col_5>C Program</col_5>
  </id>
  <id>
    <col_1>3</col_1>
    <col_2>Mrs.Tee</col_2>
    <col_3>论坛中的应用</col_3>
    <col_4>2005-8-23 21:02:16</col_4>
    <col_5>Web 编程精华</col_5>
  </id>
  <id>
    <col_1>4</col_1>
    <col_2>Mr.Hong</col_2>
    <col_3>C++</col_3>
    <col_4>2005-8-08 10:22:48</col_4>
    <col_5>C++命令集合</col_5>
  </id>
  <id>
    <col_1>5</col_1>
    <col_2>Mr.Chen</col_2>
    <col_3>Asp错误信息总汇</col_3>
    <col_4>2005-9-13 16:39:05</col_4>
    <col_5>javascript脚本</col_5>
  </id>
  <id>
    <col_1>6</col_1>
    <col_2>Mr.Tin</col_2>
    <col_3>Photo 的应用</col_3>
    <col_4>2005-9-03 11:39:05</col_4>
    <col_5>图文处理</col_5>
  </id>
  <id>
    <col_1>7</col_1>
    <col_2>Mr.Xin</col_2>
    <col_3>Dreamweaver</col_3>
    <col_4>2005-5-13 18:39:05</col_4>
    <col_5>网页设计</col_5>
  </id>
  <id>
    <col_1>8</col_1>
    <col_2>Mr.Wei</col_2>
    <col_3>Fireworks</col_3>
    <col_4>2005-9-01 16:39:05</col_4>
    <col_5>网页制图</col_5>
  </id>
</root>

-----------------------------------------------------------------------


XSL代码:

保存为(paixu1.xsl)

<?xml version="1.0" encoding="gb2312" ?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:template match="/root">
<html>
<head>
<title>排序</title>
<style>
body,Body,team,blue_ID,blue_name,blue_text,blue_time,blue_class{ font: "18px" "宋体", "Arial", "Times New Roman"; }
table { font-size: "18px"; 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 load()
{
stylesheet=document.XSLDocument;
source=document.XMLDocument;
}

function sort1(x)
{
sortField=stylesheet.documentElement.selectSingleNode("//xsl:sort/@select");
sortField.value=x;
Layer1.innerHTML=source.transformNode(stylesheet);
}
</script>

</head>
<body onload="load()">

<div id="Layer1">
<table width="80%" border="1" align="center" cellpadding="1" cellspacing="1" bordercolordark="#ffffff" bordercolorlight="#ADAAAD">
<tr bgcolor="#3366cc" align="center">
 <xsl:for-each select="head/*">
  <td style="cursor:hand">
   <xsl:attribute name="onClick">sort1('<xsl:value-of select="name()"/>')
   </xsl:attribute>
     <xsl:value-of select="."/>
  </td>
 </xsl:for-each>
</tr>

<xsl:apply-templates select="id">
 <xsl:sort select="name()" data-type="text"/>
</xsl:apply-templates>
</table>
</div>


</body>
</html>
</xsl:template>

<xsl:template match="id">
<tr>
 <xsl:for-each select="*">
  <td><xsl:value-of select="."/></td>
 </xsl:for-each>
</tr>
</xsl:template>
</xsl:stylesheet>


---------------------------------------------------------------------------

望大家试看看,改好后请将源码上传以供学习使用. 谢谢!

[此贴子已经被作者于2005-9-26 10:25:11编辑过]
--  作者：Qr
--  发布时间：9/26/2005 5:04:00 PM

--  
和本贴差不多，看一下。
http://bbs.xml.org.cn/dispbbs.asp?BoardID=8&id=6375&star=1
--  作者：QimiQ
--  发布时间：9/26/2005 6:11:00 PM

--  
以下是引用Qr在2005-9-26 17:04:00的发言：
和本贴差不多，看一下。
http://bbs.xml.org.cn/dispbbs.asp?BoardID=8&id=6375&star=1



那种方法太复杂了
--  作者：donghid
--  发布时间：11/8/2005 7:15:00 AM

--  
参考:转贴的
-------------------------------------------------------------------------------
<html>  
<head>  
<script>  
var  sig=true  
function  sort(strKey)  
{  
var  xml1=mxhxml.XMLDocument  
var  xsl1=mxhxsl.XMLDocument  
var  s1=xsl1.selectSingleNode("//xsl:for-each/@order-by")  
if(s1.value==strKey)  s1.value="-"  +  strKey  
else  
s1.value=strKey  
document.all.mxh.innerHTML=xml1.transformNode(xsl1)  
}  
</script>  
</head>  
<body  onload="sort('Name')">  
<div  id=mxh></div>  
<XML  id=mxhxsl>  
<?xml  version="1.0"?>  
<xsl:stylesheet  xmlns:xsl="http://www.w3.org/TR/WD-xsl">  
   <xsl:template  match="/">  
   点击标题排序：  
       <table  border="2">  
           <tr>  
               <th  onclick="sort('Name')"  style="cursor:hand">名称</th>  
               <th  onclick="sort('Email')"  style="cursor:hand">电子邮件</th>  
           </tr>  
           <xsl:for-each  select="/Custs/Cust"  order-by="Name">  
               <tr>  
                   <td>  
                       <xsl:value-of  select="Name"/>  
                   </td>  
                   <td>  
                       <xsl:value-of  select="Email"/>  
                   </td>  
               </tr>  
           </xsl:for-each>  
       </table>  
   </xsl:template>  
</xsl:stylesheet>  
</XML>  

<XML  id=mxhxml>  
<?xml  version="1.0"?>  
<Custs>  
<Cust>  
       <Name>Nancy</Name>  
       <Email>www@yahoo.com</Email>  
   </Cust>  
   <Cust>  
       <Name>Peter</Name>  
       <Email>dotnet@aol.com</Email>  
   </Cust>  
   <Cust>  
       <Name>Rachel</Name>  
       <Email>billgates@microsoft.com</Email>  
   </Cust>  
   <Cust>  
       <Name>Seth</Name>  
       <Email>flying@yous.net</Email>  
   </Cust>  
   <Cust>  
       <Name>Tim</Name>  
       <Email>agooyboy@lovegirl.com</Email>  
   </Cust>  
</Custs>  
</XML>  
W 3 C h i n a ( since 2003 ) 旗 下 站 点
苏ICP备05006046号《全国人大常委会关于维护互联网安全的决定》《计算机信息网络国际联网安全保护管理办法》
 62.500ms