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

来源：互联网发布：淘宝怎么换货流程编辑：程序博客网时间：2024/05/04 00:53

页面代码：

test.html

<!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

<title>Static Table Sample</title>
6

//var dsEmployees = new Spry.Data.XMLDataSet("data/employees-01.xml", "employees/employee");
11

var dsEmployees = new Spry.Data.XMLDataSet("data/employees-01.xml", "employees/employee", { sortOnLoad: "@id", sortOrderOnLoad: "ascending" });
12

var myObserver = new Object;
14

myObserver.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

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

myObserver.onPostSort = function(dataSet, data){
24

//alert("onPostSort called!");
25

};
26

dsEmployees.addObserver(myObserver);
29

</script>
32

<style>
34

.even {
36

background-color: #eeeeee
37

}
38

.odd {
40

background-color: #ffffff;
41

}
42

</style>
44

</head>
46

<body>
47

<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

</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

<?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