客户端JScript+XSLT+XML Data Islands排序
-------------------------------------------------------------------
Created By: Belltree <belltree@163.com>
-------------------------------------------------------------------
说明:可以按照两列排序,对于每列,可以进行顺排和倒排
-------------------------------------------------------------------
HTML File: index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Island Example</title>
</head>
<style>
TH {
text-align:left;
vertical-align:middle;
padding:2px;
font-size:9pt;
font-family:Arial;
cursor:hand;
background-color: #3366cc;
border-bottom: #264e75 solid 1px;
border-left: #71c2ff solid 1px;
border-right: #264e75 solid 1px;
border-top: #71c2ff solid 1px;
color: #ffffff;
text-decoration: none;
}
TD {
vertical-align:top;
background-color:#EEE;
padding:4px;
font-size:9pt;
font-family:Arial;
}
</style>
<XML id="source" src="books.xml"></XML>
<XML id="style" src="books.xsl"></XML>
<SCRIPT FOR="window" EVENT="onload">
xslTarget.innerHTML = source.transformNode(style.XMLDocument);
</SCRIPT>
<body>
<script language="Jscript">
function sortBy(key){
var newkey;
var lastkey;
if ((key=="") || (key==null)){
return false;
}
var s = style.selectSingleNode("//xsl:for-each");
if (s==null) return false;
var k = s.getAttribute("order-by");
if (k.indexOf(";")==-1)
lastkey = k;
else
lastkey = k.substring(0,k.indexOf(";"));
if (key==lastkey) key = "-"+key;
newkey = key+";"+lastkey;
s.setAttribute("order-by",newkey);
//alert(newkey);
xslTarget.innerHTML = source.transformNode(style.XMLDocument);
return true;
}
</script>
<div id="xslTarget"></div>
</body>
</html>
XML File: books.xml
<?xml version="1.0"?>
<?xml-stylesheet href="books.xsl" _fcksavedurl=""books.xsl"" type="text/xsl"?>
<catalog>
<book id="bk101">
<author>Gambardella, Matthew</author>
<title>XML Developer's Guide</title>
<genre>Computer</genre>
<price>44.95</price>
<publish_date>2000-10-01</publish_date>
<description>An in-depth look at creating applications
with XML.</description>
</book>
<book id="bk102">
<author>Ralls, Kim</author>
<title>Midnight Rain</title>
<genre>Fantasy</genre>
<price>5.95</price>
<publish_date>2000-12-16</publish_date>
<description>A former architect battles corporate zombies,
an evil sorceress, and her own childhood to become queen
of the world.</description>
</book>
<book id="bk103">
<author>Corets, Eva</author>
<title>Maeve Ascendant</title>
<genre>Fantasy</genre>
<price>5.95</price>
<publish_date>2000-11-17</publish_date>
<description>After the collapse of a nanotechnology
society in England, the young survivors lay the
foundation for a new society.</description>
</book>
<book id="bk104">
<author>Corets, Eva</author>
<title>Oberon's Legacy</title>
<genre>Fantasy</genre>
<price>5.95</price>
<publish_date>2001-03-10</publish_date>
<description>In post-apocalypse England, the mysterious
agent known only as Oberon helps to create a new life
for the inhabitants of London. Sequel to Maeve
Ascendant.</description>
</book>
<book id="bk105">
<author>Corets, Eva</author>
<title>The Sundered Grail</title>
<genre>Fantasy</genre>
<price>5.95</price>
<publish_date>2001-09-10</publish_date>
<description>The two daughters of Maeve, half-sisters,
battle one another for control of England. Sequel to
Oberon's Legacy.</description>
</book>
<book id="bk106">
<author>Randall, Cynthia</author>
<title>Lover Birds</title>
<genre>Romance</genre>
<price>4.95</price>
<publish_date>2000-09-02</publish_date>
<description>When Carla meets Paul at an ornithology
conference, tempers fly as feathers get ruffled.</description>
</book>
<book id="bk107">
<author>Thurman, Paula</author>
<title>Splish Splash</title>
<genre>Romance</genre>
<price>4.95</price>
<publish_date>2000-11-02</publish_date>
<description>A deep sea diver finds true love twenty
thousand leagues beneath the sea.</description>
</book>
<book id="bk108">
<author>Knorr, Stefan</author>
<title>Creepy Crawlies</title>
<genre>Horror</genre>
<price>4.95</price>
<publish_date>2000-12-06</publish_date>
<description>An anthology of horror stories about roaches,
centipedes, scorpions and other insects.</description>
</book>
<book id="bk109">
<author>Kress, Peter</author>
<title>Paradox Lost</title>
<genre>Science Fiction</genre>
<price>6.95</price>
<publish_date>2000-11-02</publish_date>
<description>After an inadvertant trip through a Heisenberg
Uncertainty Device, James Salway discovers the problems
of being quantum.</description>
</book>
<book id="bk110">
<author>O'Brien, Tim</author>
<title>Microsoft .NET: The Programming Bible</title>
<genre>Computer</genre>
<price>36.95</price>
<publish_date>2000-12-09</publish_date>
<description>Microsoft's .NET initiative is explored in
detail in this deep programmer's reference.</description>
</book>
<book id="bk111">
<author>O'Brien, Tim</author>
<title>MSXML3: A Comprehensive Guide</title>
<genre>Computer</genre>
<price>36.95</price>
<publish_date>2000-12-01</publish_date>
<description>The Microsoft MSXML3 parser is covered in
detail, with attention to XML DOM interfaces, XSLT processing,
SAX and more.</description>
</book>
<book id="bk112">
<author>Galos, Mike</author>
<title>Visual Studio 7: A Comprehensive Guide</title>
<genre>Computer</genre>
<price>49.95</price>
<publish_date>2001-04-16</publish_date>
<description>Microsoft Visual Studio 7 is explored in depth,
looking at how Visual Basic, Visual C++, C#, and ASP+ are
integrated into a comprehensive development
environment.</description>
</book>
</catalog>
XSL File: books.xsl
<?xml version="1.0"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<xsl:template match="/">
<table border="0" width="700" cellspacing="2" cellpadding="2">
<tr>
<th><xsl:attribute name="onClick">sortBy('@id')</xsl:attribute>ID</th>
<th><xsl:attribute name="onClick">sortBy('author')</xsl:attribute>Author</th>
<th><xsl:attribute name="onClick">sortBy('title')</xsl:attribute>Title</th>
<th><xsl:attribute name="onClick">sortBy('genre')</xsl:attribute>Genre</th>
<th><xsl:attribute name="onClick">sortBy('number(price)')</xsl:attribute>Price</th>
<th><xsl:attribute name="onClick">sortBy('publish_date')</xsl:attribute>Publish Date</th>
</tr>
<xsl:for-each select="catalog/book" order-by="@id">
<tr>
<td><xsl:value-of select="@id"/></td>
<td><xsl:value-of select="author"/></td>
<td><xsl:value-of select="title"/></td>
<td><xsl:value-of select="genre"/></td>
<td><xsl:value-of select="price"/></td>
<td><xsl:value-of select="publish_date"/></td>
</tr>
</xsl:for-each>
</table>
</xsl:template>
</xsl:stylesheet>
-------------------------------------------------------------------
Created By: Belltree <belltree@163.com>
-------------------------------------------------------------------
说明:可以按照两列排序,对于每列,可以进行顺排和倒排
-------------------------------------------------------------------
HTML File: index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Island Example</title>
</head>
<style>
TH {
text-align:left;
vertical-align:middle;
padding:2px;
font-size:9pt;
font-family:Arial;
cursor:hand;
background-color: #3366cc;
border-bottom: #264e75 solid 1px;
border-left: #71c2ff solid 1px;
border-right: #264e75 solid 1px;
border-top: #71c2ff solid 1px;
color: #ffffff;
text-decoration: none;
}
TD {
vertical-align:top;
background-color:#EEE;
padding:4px;
font-size:9pt;
font-family:Arial;
}
</style>
<XML id="source" src="books.xml"></XML>
<XML id="style" src="books.xsl"></XML>
<SCRIPT FOR="window" EVENT="onload">
xslTarget.innerHTML = source.transformNode(style.XMLDocument);
</SCRIPT>
<body>
<script language="Jscript">
function sortBy(key){
var newkey;
var lastkey;
if ((key=="") || (key==null)){
return false;
}
var s = style.selectSingleNode("//xsl:for-each");
if (s==null) return false;
var k = s.getAttribute("order-by");
if (k.indexOf(";")==-1)
lastkey = k;
else
lastkey = k.substring(0,k.indexOf(";"));
if (key==lastkey) key = "-"+key;
newkey = key+";"+lastkey;
s.setAttribute("order-by",newkey);
//alert(newkey);
xslTarget.innerHTML = source.transformNode(style.XMLDocument);
return true;
}
</script>
<div id="xslTarget"></div>
</body>
</html>
XML File: books.xml
<?xml version="1.0"?>
<?xml-stylesheet href="books.xsl" _fcksavedurl=""books.xsl"" type="text/xsl"?>
<catalog>
<book id="bk101">
<author>Gambardella, Matthew</author>
<title>XML Developer's Guide</title>
<genre>Computer</genre>
<price>44.95</price>
<publish_date>2000-10-01</publish_date>
<description>An in-depth look at creating applications
with XML.</description>
</book>
<book id="bk102">
<author>Ralls, Kim</author>
<title>Midnight Rain</title>
<genre>Fantasy</genre>
<price>5.95</price>
<publish_date>2000-12-16</publish_date>
<description>A former architect battles corporate zombies,
an evil sorceress, and her own childhood to become queen
of the world.</description>
</book>
<book id="bk103">
<author>Corets, Eva</author>
<title>Maeve Ascendant</title>
<genre>Fantasy</genre>
<price>5.95</price>
<publish_date>2000-11-17</publish_date>
<description>After the collapse of a nanotechnology
society in England, the young survivors lay the
foundation for a new society.</description>
</book>
<book id="bk104">
<author>Corets, Eva</author>
<title>Oberon's Legacy</title>
<genre>Fantasy</genre>
<price>5.95</price>
<publish_date>2001-03-10</publish_date>
<description>In post-apocalypse England, the mysterious
agent known only as Oberon helps to create a new life
for the inhabitants of London. Sequel to Maeve
Ascendant.</description>
</book>
<book id="bk105">
<author>Corets, Eva</author>
<title>The Sundered Grail</title>
<genre>Fantasy</genre>
<price>5.95</price>
<publish_date>2001-09-10</publish_date>
<description>The two daughters of Maeve, half-sisters,
battle one another for control of England. Sequel to
Oberon's Legacy.</description>
</book>
<book id="bk106">
<author>Randall, Cynthia</author>
<title>Lover Birds</title>
<genre>Romance</genre>
<price>4.95</price>
<publish_date>2000-09-02</publish_date>
<description>When Carla meets Paul at an ornithology
conference, tempers fly as feathers get ruffled.</description>
</book>
<book id="bk107">
<author>Thurman, Paula</author>
<title>Splish Splash</title>
<genre>Romance</genre>
<price>4.95</price>
<publish_date>2000-11-02</publish_date>
<description>A deep sea diver finds true love twenty
thousand leagues beneath the sea.</description>
</book>
<book id="bk108">
<author>Knorr, Stefan</author>
<title>Creepy Crawlies</title>
<genre>Horror</genre>
<price>4.95</price>
<publish_date>2000-12-06</publish_date>
<description>An anthology of horror stories about roaches,
centipedes, scorpions and other insects.</description>
</book>
<book id="bk109">
<author>Kress, Peter</author>
<title>Paradox Lost</title>
<genre>Science Fiction</genre>
<price>6.95</price>
<publish_date>2000-11-02</publish_date>
<description>After an inadvertant trip through a Heisenberg
Uncertainty Device, James Salway discovers the problems
of being quantum.</description>
</book>
<book id="bk110">
<author>O'Brien, Tim</author>
<title>Microsoft .NET: The Programming Bible</title>
<genre>Computer</genre>
<price>36.95</price>
<publish_date>2000-12-09</publish_date>
<description>Microsoft's .NET initiative is explored in
detail in this deep programmer's reference.</description>
</book>
<book id="bk111">
<author>O'Brien, Tim</author>
<title>MSXML3: A Comprehensive Guide</title>
<genre>Computer</genre>
<price>36.95</price>
<publish_date>2000-12-01</publish_date>
<description>The Microsoft MSXML3 parser is covered in
detail, with attention to XML DOM interfaces, XSLT processing,
SAX and more.</description>
</book>
<book id="bk112">
<author>Galos, Mike</author>
<title>Visual Studio 7: A Comprehensive Guide</title>
<genre>Computer</genre>
<price>49.95</price>
<publish_date>2001-04-16</publish_date>
<description>Microsoft Visual Studio 7 is explored in depth,
looking at how Visual Basic, Visual C++, C#, and ASP+ are
integrated into a comprehensive development
environment.</description>
</book>
</catalog>
XSL File: books.xsl
<?xml version="1.0"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<xsl:template match="/">
<table border="0" width="700" cellspacing="2" cellpadding="2">
<tr>
<th><xsl:attribute name="onClick">sortBy('@id')</xsl:attribute>ID</th>
<th><xsl:attribute name="onClick">sortBy('author')</xsl:attribute>Author</th>
<th><xsl:attribute name="onClick">sortBy('title')</xsl:attribute>Title</th>
<th><xsl:attribute name="onClick">sortBy('genre')</xsl:attribute>Genre</th>
<th><xsl:attribute name="onClick">sortBy('number(price)')</xsl:attribute>Price</th>
<th><xsl:attribute name="onClick">sortBy('publish_date')</xsl:attribute>Publish Date</th>
</tr>
<xsl:for-each select="catalog/book" order-by="@id">
<tr>
<td><xsl:value-of select="@id"/></td>
<td><xsl:value-of select="author"/></td>
<td><xsl:value-of select="title"/></td>
<td><xsl:value-of select="genre"/></td>
<td><xsl:value-of select="price"/></td>
<td><xsl:value-of select="publish_date"/></td>
</tr>
</xsl:for-each>
</table>
</xsl:template>
</xsl:stylesheet>