dataTable

「Google Ajax API 動的ロード」では、Google Ajax API を動的にロードする方法があることを紹介しました。今回は、その具体的な例として、「visualization」パッケージを動的にロードして利用するツールの一例を示します。題材にしたのは、ページにテーブルを作成する「Google Visualization : Table」です。

皆さんは、WEBページにテーブルを作成するとき、面倒だと思ったことはありませんか?簡単なテーブルであっても、TABLE要素を記述して、TR要素を各行ごとに記述して、さらにセルの数だけ、TD要素を入れなければなりません。下のテーブルは、そういうことはしていません。テーブルを挿入したい場所に次の記述をしているだけです。

<script src="http://file.netarrows.edoblog.net/dataTable.js" title="string:name;number:age;boolean:true|Nancy;36;false|Alice;17;false|Cozy;28;true"></script>

データ部分は、SCRIPT要素のtotle属性に記述しています。このtitle属性を読み取って、Google Visualization の dataTable に放り込むことによって、テーブルを作成しています。データの各行は、パイプ「|」で区切っています。そして、各セルはセミコロン「;」で区分しています。一行目だけは特殊で、カラムのデータタイプとラベルをコロン「:」で関連つけています。

「http://file.netarrows.edoblog.net/dataTable.js」のソースコードを読めば、前回説明したような形で動的ロードを利用していることが分かります。今回は、その処理内容については、詳しく説明しませんが、動的ロードが非常に便利なものらしいことは、わかるかと思います。