SpryではXMLデータを読み込んでソートして表示することもできます。ソートするにはsort()メソッドを使います。「myDatabase = new Spry.Data.XMLDataSet("fruits.xml", "/list/fruits");」として読み込んだXMLデータはmyDatabaseオブジェクトに入っています。このmyDatabaseオブジェクトにsort()メソッドがあります。最初のパラメータにソートしたいデータ名（XMLタグ名または属性名）を指定します。もし、ソートしたい項目が2つある場合には['price','counter']のように配列形式で指定します。以下のサンプルではボタンをクリックすると価格順で昇順でソートします。（サンプルを
実行する）
【XMLファイル：fruits.xml】
<?xml version="1.0" encoding="utf-8"?>
<list>
<fruits><name>リンゴ</name><price>100</price></fruits>
<fruits><name>ミカン</name><price>200</price></fruits>
<fruits><name>メロン</name><price>300</price></fruits>
<fruits><name>イチゴ</name><price>250</price></fruits>
<fruits><name>レモン</name><price>150</price></fruits>
<fruits><name>トマト</name><price>110</price></fruits>
</list>
【HTMLファイル】
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>ソートして表示する</title>
<script type="text/javascript" src="xpath.js"></script>
<script type="text/javascript" src="SpryData.js"></script>
<script type="text/javascript"><!--
myDatabase = new Spry.Data.XMLDataSet("fruits.xml", "/list/fruits");
// --></script>
</head>
<body>
<h1>Adobe Spry : サンプル</h1>
<form>
<input type="button" value="ソート" onClick="
myDatabase.sort('price')">
</form>
<div spry:region="myDatabase">
<div spry:repeat="myDatabase">
<span>{myDatabase::name}：{myDatabase::price}円</span>
</div>
</body>
</html>
sort()メソッドには二番目のパラメータに何も指定しない場合は昇順でソートされます。二番目のパラメータにascendingを指定すると昇順で、descendingを指定すると降順でソートされます。以下のサンプルはボタンをクリックすると昇順、降順でソートされます。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>昇順／降順を切り替えて表示する</title>
<script type="text/javascript" src="xpath.js"></script>
<script type="text/javascript" src="SpryData.js"></script>
<script type="text/javascript"><!--
myDatabase = new Spry.Data.XMLDataSet("fruits.xml", "/list/fruits");
// --></script>
</head>
<body>
<h1>Adobe Spry : サンプル</h1>
<form>
<input type="button" value="昇順"
onClick="myDatabase.sort('price','ascending')">
<input type="button" value="降順"
onClick="myDatabase.sort('price','descending')">
</form>
<div spry:region="myDatabase">
<div spry:repeat="myDatabase">
<span>{myDatabase::name}：{myDatabase::price}円</span>
</div>
</body>
</html>
sort()メソッドの二番目のパラメータにはtoggleを指定することもできます。これは昇順と降順を交互に切り替えます。以下のサンプルはボタンをクリックすると価格を昇順、降順が交互に切り替わります。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>昇順／降順を切り替えて表示する</title>
<script type="text/javascript" src="xpath.js"></script>
<script type="text/javascript" src="SpryData.js"></script>
<script type="text/javascript"><!--
myDatabase = new Spry.Data.XMLDataSet("fruits.xml", "/list/fruits");
// --></script>
</head>
<body>
<h1>Adobe Spry : サンプル</h1>
<form>
<input type="button" value="昇順"
onClick="myDatabase.sort('price','toggle')">
</form>
<div spry:region="myDatabase">
<div spry:repeat="myDatabase">
<span>{myDatabase::name}：{myDatabase::price}円</span>
</div>
</body>
</html>
ボタンクリックで昇順、降順を切り替えるのではなく最初から昇順で表示させることもできます。この場合はSpry.Data.XMLDataSet()の三番目のパラメータにsortOnLoadに並べ替えるキー名（XMLタグ名または属性名）、sortOrderOnLoadに並べ替え方法（ascendingまたはdescending）を指定します。以下のサンプルでは価格順にソートして表示します。（サンプルを
実行する）
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>最初から昇順で表示する</title>
<script type="text/javascript" src="xpath.js"></script>
<script type="text/javascript" src="SpryData.js"></script>
<script type="text/javascript"><!--
myDatabase = new Spry.Data.XMLDataSet("fruits.xml", "/list/fruits", {
sortOnLoad: "price", sortOrderOnLoad: "ascending"
});
// --></script>
</head>
<body>
<h1>Adobe Spry : サンプル</h1>
<div spry:region="myDatabase">
<div spry:repeat="myDatabase">
<span>{myDatabase::name}：{myDatabase::price}円</span>
</div>
</body>
</html>
[
目次へ]
(2006.7.28)