【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>PV数</th>
	</tr>
	<tr spry:repeat="CsvData">
		<td>{日付}</td><td>{アクセス数}</td><td>{PV数}</td>
	</tr>
</table>

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

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

サンプル

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

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

trにhover属性を付ける

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

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

</tr spry:repeat="CsvData" spry:hover="hover">
	</td>{日付}<//td></td>{アクセス数}<//td></td>{PV数}<//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('PV数','toggle')">PV数</th>
	</tr>
	<tr spry:repeat="CsvData">
		<td>{日付}</td><td>{アクセス数}</td><td>{PV数}</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クリエイターで忘年会»

このエントリーのトラックバックURL
http://blog.webcreativepark.net/cgi/mt/mt-bt.cgi/1161
コメント

こんにちは。はじめまして。
こちらのサイトを参考にさせていただきながら、Spryの勉強をしているものです。

早速ですが、
このページのsample17~20.htmlが、
・IE6では動かない
・FireFox3 / Chrome2 / Safari4では動く
という状況です(Windows環境下で確認)。

Adobeの2007年2月の「Adobe Edge」の記事
http://www.adobe.com/jp/newsletters/edge/february2007/articles/article2/index.html
によりますと、spry:region 属性はtableに設定できないようです。

※自分で実際に作ってみて、IE6だけどうもエラーが出るため、調べていて判りました。

本件、修正または一文添えられた方が良いかと存じます。
どうぞ宜しくお願いいたします。

投稿者:checker2006 | 2009年8月24日 09:41

>checker2006さん

ご指摘ありがとうございます。
本文中にご指摘の注意点を追記いたしました。

投稿者:西畑一馬 | 2009年12月25日 06:36
コメントを投稿