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|一个都不能少！ 阅读(1990) 评论(2)  编辑 收藏 所属分类: Spry

  回复  引用    
#1楼 2007-03-15 21:59 | zltang [未注册用户]
请问为什么中文的不能显示和排序
  回复  引用    
#2楼 2007-03-19 08:44 | dannyr [未注册用户]
应该是字符集的缘故，中文是可以显示并排序的！

标题  
姓名  
主页
Email (博主才能看到) 
验证码 *  看不清,换一张 [登录][注册]
内容(请不要发表任何与政治相关的内容)  
网站首页

新闻频道

社区

小组

博问

网摘

闪存

找找看
  登录  使用高级评论  新用户注册  返回页首  恢复上次提交      
该文被作者在 2006-10-26 16:11 编辑过
"五向定位"职业成长路线公开课(上海、南京、大连)
Google站内搜索


相关链接:


最新IT新闻:
微型博客Twitter取消IM服务 称其ROI差
用手机聊Gtalk的方法以及应用总结
Google开拓美政府机构市场 微软业务受冲击
消息称苹果正在开发iTunes网络电视
微软周一开电话会议 预计将发布Silverlight2.0