Spry Framework入门（四）——XML数据集排序

简介：
        Spry Framework是Adobe出品的轻量级的支持Ajax的JavaScript库，以HTML为中心，使用最基本的HTML、CSS和JavaScript来实现丰富Web页面体验。
       本例子演示了数据集的字段排序功能以及对数据集排序时候触发的事件的处理；代码很简单，需要讲一下sort方法，sort方法有2个入口参数：字段名和排序顺序（ascending  descending  toggle），前面一个就是需要排序的字段名称，第二个是指示排序顺序（从小到大还是从大到小），其中toggle为本次排序是否和上次反序，比如当前数据集按字段1升序排序，那调用sort方法后则按降序排序，反之亦然。还有一个是排序字段的数据类型，默认的Spry都是按字符串string类型排序，另外Spry提供了数字number和日期date，一共3种数据排序类型。如设置字段为数字类型：dsPhotos.setColumnType("@width", "number");
        顺便做了个数据交替显示的功能。

试验环境：

操作系统：windowsXP Sp2
浏览器：FireFox 2.0
WEB服务器：IIS 5.0
Spry库：Spry_P1_3_08-11


安装：
从http://labs.adobe.com/technologies/spry/ 下载安装包，目前版本为Spry_P1_3_08-11.zip，解开后把includes目录复制到自己的IIS虚拟目录上即可。




页面代码：

test.html
 1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2<html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry">
 3<head>
 4<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 5<title>Static Table Sample</title>
 6<script type="text/javascript" src="includes/xpath.js"></script>
 7<script type="text/javascript" src="includes/SpryData.js"></script>
 8
 9<script type="text/javascript">
10//var dsEmployees = new Spry.Data.XMLDataSet("data/employees-01.xml", "employees/employee");
11var dsEmployees = new Spry.Data.XMLDataSet("data/employees-01.xml", "employees/employee", { sortOnLoad: "@id", sortOrderOnLoad: "ascending" });
12
13var myObserver = new Object;
14
15myObserver.onPreSort = function(dataSet, data){
16    //alert("onPreSort called!");
17    var info = document.getElementById("info");
18    info.innerHTML = "<table><tr><th>Last Sort Columns</th><th>Sort Order</th></tr><tr><td>" + data.oldSortColumns + "</td><td>" + data.oldSortOrder + "</td></tr></table>";
19
20    info.innerHTML += "<table><tr><th>New Sort Columns</th><th>Sort Order</th></tr><tr><td>" + data.newSortColumns + "</td><td>" + data.newSortOrder + "</td></tr></table>";
21};
22
23myObserver.onPostSort = function(dataSet, data){
24    //alert("onPostSort called!");
25};
26
27
28dsEmployees.addObserver(myObserver);
29
30
31</script>
32
33<style>
34
35.even {
36    background-color: #eeeeee
37}
38
39.odd {
40    background-color: #ffffff;
41}
42
43</style>
44
45</head>
46<body>
47
48<div spry:region="dsEmployees">
49<table border="1">
50    <tr>
51        <th scope="col">Employee ID </th>
52        <th scope="col">Last Name </th>
53        <th scope="col">First Name </th>
54        <th scope="col">Phone</th>
55        <th scope="col">Username</th>
56    </tr>
57    <tr spry:repeat="dsEmployees" class="{ds_EvenOddRow}">
58        <td>{@id}</td>
59        <td>{lastname}</td>
60        <td>{firstname}</td>
61        <td>{phone}</td>
62        <td>{username}</td>
63    </tr>
64</table>
65
66
67</div>
68<hr>
69<input type=button value="Sort by ID" onclick="dsEmployees.sort('@id', 'toggle');" >
70<input type=button value="Sort by Last Name" onclick="dsEmployees.sort('lastname', 'toggle');" >
71<br>
72<div id="info"/>
73</body>
74</html>

employees-01.xml
 1<?xml version="1.0" encoding="iso-8859-1"?>
 2<employees xmlns="http://www.foo.com/employees">
 3    <employee id="123456">
 4        <lastname>Smith</lastname>
 5        <firstname>Edward</firstname>
 6        <phone>(415) 333-0235 </phone>
 7        <username>esmith</username>
 8    </employee>
 9    <employee id="127937">
10        <lastname>Johnson</lastname>
11        <firstname>Neil</firstname>
12        <phone>(415) 333-9475 </phone>
13        <username>njohnson</username>
14    </employee>
15    <employee id="126474">
16        <lastname>Williams</lastname>
17        <firstname>Steve</firstname>
18        <phone>(415) 333-4573 </phone>
19        <username>swilliams</username>
20    </employee>
21    <employee id="120585">
22        <lastname>Jones</lastname>
23        <firstname>John</firstname>
24        <phone>(415) 333-9345 </phone>
25        <username>jjones</username>
26    </employee>
27    <employee id="127493">
28        <lastname>Brown</lastname>
29        <firstname>Joe</firstname>
30        <phone>(415) 333-5938 </phone>
31        <username>jbrown</username>
32    </employee>
33</employees>
34
posted @ 2006-10-26 15:52 dannyr|一个都不能少！ 阅读(2462) 评论(2) 编辑 收藏

　回复　引用　  
#1楼2007-03-15 21:59 | zltang[未注册用户]
请问为什么中文的不能显示和排序
　回复　引用　  
#2楼2007-03-19 08:44 | dannyr[未注册用户]
应该是字符集的缘故，中文是可以显示并排序的！
最新IT新闻:
· 最想要的Entity Framework功能
· 专访Jeffrey Richter：Windows 8是微软的重中之重
· 《福布斯》：谷歌进军硬件产品 难撼动苹果地位
· 美国空军拟最多购买1.8万台iPad 2
· 分析称专利之争让谷歌苹果两败俱伤
» 更多新闻...