Adobe Spry 指定した範囲のデータを表示する


 Spryは指定したデータを単純に表示させるだけではなく、条件を指定して表示させることができます。例えば二番目のデータだけを表示させることもできます。この場合、spry:if属性を使い属性値に条件式を指定します。何番目なのかを示すのはds_RowNumberです。この値が0であれば一番最初のデータを処理している、1であれば二番目、2であれば三番目という具合になります。二番目のデータを表示させるのであれば{ds_RowNumber} == 1と指定します。二番目のデータは「ミカン」「橙色」なので以下のサンプルを実行すると「ミカンは橙色です。」と表示されます。(サンプルを実行する

<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"><!--
var fruitsData = [
{ fruits: "リンゴ", Color: "赤色" },
{ fruits: "ミカン", Color: "橙色" },
{ fruits: "メロン", Color: "緑色" },
{ fruits: "イチゴ", Color: "赤色" },
{ fruits: "レモン", Color: "黄色" },
{ fruits: "トマト", Color: "赤色" }
];
myDatabase = new Spry.Data.DataSet();
myDatabase.data = fruitsData;
myDatabase.dataHash = fruitsData;
myDatabase.loadData();
// --></script>
</head>
<body>
<h1>Adobe Spry : サンプル</h1>
<div spry:region="myDatabase">
<div spry:repeat="myDatabase">
<span spry:if="{ds_RowNumber} == 1">{fruits}は{Color}です。</span>
</div>
</div>
</body>
</html>

 今度は二番目以降のデータを表示させてみましょう。これは条件式を変えるだけです。{ds_RowNumber} == 1の場合は二番目のデータだけでしたが、これを{ds_RowNumber} >= 1にすると二番目以降のデータが表示されます。ちなみに{ds_RowNumber} <= 1とすれば最初と二番目のデータが表示されます。(サンプルを実行する

<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"><!--
var fruitsData = [
{ fruits: "リンゴ", Color: "赤色" },
{ fruits: "ミカン", Color: "橙色" },
{ fruits: "メロン", Color: "緑色" },
{ fruits: "イチゴ", Color: "赤色" },
{ fruits: "レモン", Color: "黄色" },
{ fruits: "トマト", Color: "赤色" }
];
myDatabase = new Spry.Data.DataSet();
myDatabase.data = fruitsData;
myDatabase.dataHash = fruitsData;
myDatabase.loadData();
// --></script>
</head>
<body>
<h1>Adobe Spry : サンプル</h1>
<div spry:region="myDatabase">
<div spry:repeat="myDatabase">
<span spry:if="{ds_RowNumber} >= 1">{fruits}は{Color}です。</span>
</div>
</div>
</body>
</html>

 次に指定した範囲のデータを表示させてみましょう。これも条件式を変えるだけです。特定の範囲の場合には&&を使って「({ds_RowNumber} >= 1) && ({ds_RowNumber} <= 3)」と書きます。これで二番目から四番目までのデータが表示されます。(サンプルを実行する

<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"><!--
var fruitsData = [
{ fruits: "リンゴ", Color: "赤色" },
{ fruits: "ミカン", Color: "橙色" },
{ fruits: "メロン", Color: "緑色" },
{ fruits: "イチゴ", Color: "赤色" },
{ fruits: "レモン", Color: "黄色" },
{ fruits: "トマト", Color: "赤色" }
];
myDatabase = new Spry.Data.DataSet();
myDatabase.data = fruitsData;
myDatabase.dataHash = fruitsData;
myDatabase.loadData();
// --></script>
</head>
<body>
<h1>Adobe Spry : サンプル</h1>
<div spry:region="myDatabase">
<div spry:repeat="myDatabase">
<span spry:if="({ds_RowNumber} >= 1) && ({ds_RowNumber} <= 3)">{fruits}は{Color}です。</span>
</div>
</div>
</body>
</html>

 指定範囲ではなく奇数番目のデータを表示させることもできます。この場合は&を使って論理積 (AND) をとります。結果が0であれば偶数、1であれば奇数になります。つまり条件式を「({ds_RowNumber} & 1) == 1」とすると奇数番目のみデータが表示されます(*データの開始番号は0から始まるので二番目のデータが1となり奇数になります)。(サンプルを実行する

<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"><!--
var fruitsData = [
{ fruits: "リンゴ", Color: "赤色" },
{ fruits: "ミカン", Color: "橙色" },
{ fruits: "メロン", Color: "緑色" },
{ fruits: "イチゴ", Color: "赤色" },
{ fruits: "レモン", Color: "黄色" },
{ fruits: "トマト", Color: "赤色" }
];
myDatabase = new Spry.Data.DataSet();
myDatabase.data = fruitsData;
myDatabase.dataHash = fruitsData;
myDatabase.loadData();
// --></script>
</head>
<body>
<h1>Adobe Spry : サンプル</h1>
<div spry:region="myDatabase">
<div spry:repeat="myDatabase">
<span spry:if="({ds_RowNumber} & 1) == 1">{fruits}は{Color}です。</span>
</div>
</div>
</body>
</html>

[目次へ]

(2006.7.24)