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