【Adobe Spry TIPS】 CSVを取得表示

Spryは簡単にCSVを取得して表示することもできます。（これはすごくないです？）

CSVを扱う為にはSpryData.jsとSpryCSVDataSet.jsを利用します。

<script type="text/javascript" src="./includes/SpryData.js"></script>
<script type="text/javascript" src="./includes/SpryCSVDataSet.js"></script>

コメントで指摘をいただきましたが、本サンプルはspry:region 属性がtableに完全対応はしていない為IE6等では動作しません。（追記：2009/12/25)

CSVDataSetでCSVデータを取得します。

<script type="text/javascript">
CsvData = new Spry.Data.CSVDataSet("sample17.csv");
</script>

XHTMLは

<table spry:region="CsvData">
	<tr>
		<th>日付</th>
		<th>アクセス数</th>
		<th>ＰＶ数</th>
	</tr>
	<tr spry:repeat="CsvData">
		<td>{日付}</td><td>{アクセス数}</td><td>{ＰＶ数}</td>
	</tr>
</table>

のような形で表示します。

tr要素にspry:repeatを記述して、その中のtd要素内にはCSVファイルの１行目の項目を記述、その項目基準にテーブルを生成します。

サンプル

簡単なアップローダーを用意すればクライアントが表を簡単に更新できます。

せっかくtableを利用しているのでSpryのテーブル操作も少し紹介します。

trにhover属性を付ける

ブラウザがhover擬似クラスに対応してない場合でもhover属性を付けるをつけることが可能です。

hover属性を付けたい要素にspry:hover="hover"を追加します。

</tr spry:repeat="CsvData" spry:hover="hover">
	</td>{日付}<//td></td>{アクセス数}<//td></td>{ＰＶ数}<//td>
<//tr>

CSSで.hoverに対して適用したいスタイルを記述します。

.hover { background-color: yellow; }

サンプル

並び替えを行う

sort関数を利用することにより項目ごとに並び替えを行うことができます。
※どうもCSVDataSetは数値のソートに対応してないようで文字列でのソートになります。

<table spry:region="CsvData">
	<tr>
		<th onclick="CsvData.sort('日付','toggle')">日付</th>
		<th onclick="CsvData.sort('アクセス数','toggle')">アクセス数</th>
		<th onclick="CsvData.sort('ＰＶ数','toggle')">ＰＶ数</th>
	</tr>
	<tr spry:repeat="CsvData">
		<td>{日付}</td><td>{アクセス数}</td><td>{ＰＶ数}</td>
	</tr>
</table>

第2引数のtoggleは昇順と降順を交互に切り替えることができます。

ascending　‥‥‥昇順【デフォルト】
descending　‥‥‥‥降順
toggle　‥‥‥昇順と降順を交互に切り替える

サンプル

テーブルを1行づつスタイルを変える

繰り返して出力されるtr要素にclass="{ds_EvenOddRow}"を付加することにより、奇数行にodd、偶数行にevenというclass名が付きます。

<tr spry:repeat="CsvData" class="{ds_EvenOddRow}">

サンプル

TSVを取得表示

TSVファイルを取得表示する方法はCSVとほとんど一緒です。

SpryTSVDataSet.jsを読み込みTSVDataSetでデータのセットが可能です。

【Adobe Spry TIPS】 目次

スポンサードリンク

«12/11(火)名古屋でセミナーを行います | メイン | 12月8日は関西のWebクリエイターで忘年会»