Wicker Wings

スクリプトメモ » JavaScript/Ajax

spry.Data.XMLDataSet データ表示

2007年07月12日

User List
ACCOUNT NAME ADDRESS DATE
{account} {username} {address} {date}
{account} {username} {address} {date}

HTML記述

  <div spry:region="dsUser">
    <table>
      <caption>User List</caption>
      <thead>
        <tr>
          <th scope="col" spry:sort="account">ACCOUNT</th>
          <th scope="col" spry:sort="username">NAME</th>
          <th scope="col" spry:sort="address">ADDRESS</th>
          <th scope="col" spry:sort="date">DATE</th>
        </tr>
      </thead>
      <tbody spry:repeat="dsUser" spry:choose="choose">
        <tr spry:when="{ds_RowID} == {ds_CurrentRowID}" class="{ds_EvenOddRow}">
          <td>{account}</td>
          <td>{username}</td>
          <td>{address}</td>
          <td>{date}</td>
        </tr>
        <tr spry:default="default" class="{ds_EvenOddRow}">
          <td>{account}</td>
          <td>{username}</td>
          <td>{address}</td>
          <td>{date}</td>
        </tr>
      </tbody>
    </table>
  </div>

太字で書かれた部分がspryに関するコードです。

{...}について

{...}は、カッコの中に書かれた内容に応じて表示するテキストが変化します。
{ds_RowID}、{ds_CurrentRowID}
ds_で始まるキーワードは、spryで定義されています。
ds_RowIDはXMLファイルに書かれた１行文のデータの何行目にあたるかに相当します。
ds_CurrentRowIDはHTML/XHTMLで表示しようとしているデータが何行目なのか、を意味します。
{ds_EventOddRow}
表示しようとしているデータにおいて、{ds_RowID}と{ds_CurrentRowID}が一致すれば"even"、そうでなければ"odd"を表示します。
上記HTMLではclass属性として使用していますので、<td class="even">または<td class="odd">という結果になります。

JavaScriptファイルの読み込みとXMLファイルの読み込み

<script type="text/javascript" src="includes/xpath.js"></script>
<script type="text/javascript" src="includes/SpryData.js"></script>
<script type="text/javascript">
<!--
var dsUser = new Spry.Data.XMLDataSet("spry_data.xml", "userinfo/user");
//-->
</script>

spryフレームワークのxpath.jsとSpryData.jsを読み込みます。
xpath.jsはspryフレームワークの中でもほとんどのライブラリで使用していますので、最初に記述しておきます。
その後、Spry.Data.XMLDataSet()を使ってxmlファイルと、その中で定義されているXMLのパスを指定します。

XMLファイル spry_data.xml

<?xml version="1.0" encoding="utf-8"?>
<userinfo>
<user>
<account>guest</account>
<username>guest_name</username>
<address>address_a</address>
<date>2004-02-12 21:05:1</date>
</user>
<user>
<account>water</account>
<eusername>water_name</username>
<address>address_b</address>
<date>2006-01-10 20:02:36</date>
</user>
<user>
<account>light</account>
<eusername>light_name</username>
<address>address_c</address>
<date>2006-08-6 03:03:27</date>
</user>
<user>
<account>wind</account>
<eusername>wind_name</username>
<address>address_d</address>
<date>2006-06-30 16:54:56</date>
</user>
<user>
<account>stone</account>
<eusername>stone_name</username>
<address>address_e</address>
<date>2005-02-24 11:56:11</date>
</user>
<user>
<account>fire</account>
<eusername>fire_name</username>
<address>address_f</address>
<date>2005-01-04 02:06:15</date>
</user>
</userinfo>

スタイルシート

.even{
    background-color: #ffffff;
}
.odd{
    background-color: #cccccc;
}