Spry学习(三)----XML数据集排序

页面代码：

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