Wicker Wings

スクリプトメモ » JavaScript/Spry

Spry.Data.XMLDataSet クリックで詳細を表示

2007年07月14日

User List
ACCOUNT NAME
データ部をクリックすると詳細を表示します
{account} {username}
{account} {username}
User Detail
ACCOUNT NAME ADDRESS DATE
{account} {username} {address} {date}

HTML記述

太字で書かれた部分がspryに関するコードです。
色付きが新しく追加した部分です。»前回の解説

  <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>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <td colspan="2">データ部をクリックすると詳細を表示します</td>
        </tr>
      </tfoot>
      <tbody spry:repeat="dsUser" spry:choose="choose">
        <tr spry:when="{ds_RowID} == {ds_CurrentRowID}" class="{ds_EvenOddRow}" spry:setrow="dsUser" spry:select="selected">
          <td>{account}</td>
          <td>{username}</td>
        </tr>
        <tr spry:default="default" class="{ds_EvenOddRow}" spry:setrow="dsUser" spry:select="selected">
          <td>{account}</td>
          <td>{username}</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div spry:detailregion="dsUser" class="detail clearfix">
    <table>
      <caption>User Detail</caption>
      <thead>
        <tr>
          <th>ACCOUNT</th>
          <th>NAME</th>
          <th>ADDRESS</th>
          <th>DATE</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>{account}</td>
          <td>{username}</td>
          <td>{address}</td>
          <td>{date}</td>
        </tr>
      </tbody>
    </table>
  </div>

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;
}
.selected{
    background-color: #ffcccc;
}