使いこなしたいDojoウィジェット - (2) Dojo Grid
グリッドを作成するにはdojox.grid.Gridをロードする。グリッドの記述方法やもととなるデータの格納方法がいくつか用意されているが、今回はその中でもシンプルで簡単に実装ができる<table>とCSVを用いた実装方法を紹介する。
HTMLファイル - grid.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<link href="./js/dojo1.2/dojox/grid/_grid/Grid.css" rel="stylesheet" type="text/css">
<link href="./js/dojo1.2/dojox/grid/_grid/tundraGrid.css" rel="stylesheet" type="text/css">
<title>Dojo Grid sample</title>
<script type="text/javascript" src="./js/dojo1.2/dojo/dojo.js" djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
<!--
dojo.require('dojox.grid.Grid');
dojo.require('dojo.data.ItemFileReadStore');
dojo.require('dojox.data.CsvStore');
dojo.require('dojo.parser');
// グリッドに表示する元データをロード
var store = new dojox.data.CsvStore({url:'./grid_data.csv'});
-->
</script>
</head>
<body class="tundra">
<table style="width: 400px; height: 320px;"
dojoType="dojox.grid.Grid"
store="store"
query="{ Name: '*' }"
clientSort="true">
<thead>
<tr>
<th width="300px" field="Name">Name</th>
<th width="60px">Version</th>
</tr>
</thead>
</table>
</body>
</html>
CSVファイル - grid_data.csv
Name, Version
jQuery, 1.2.6
Prototype, 1.6
Script.aculo.us, 1.8.1
YUI, 2.6.0
Mootools, 1.2.1
Dojo, 1.2
Ext JS, 2.0
Nitobi, b7054
Spry, 1.6.1
GWT, 1.5
JMaki, 1.8
Mochikit, 1.3.1
<table>をあらかじめ用意し、その中にCSVファイルの中身を展開・表示している。ロード完了までに多少時間がかかるが、そのあとの動作は軽快だ |
デベロッパは特にコードを書くことなく、ソートが行える |
ロジックを特に記述することなくソートが行えるのは嬉しいところだ。データの格納方法は今回CSV形式を採用したが、このほかにもXML形式やJSON形式などがある。
詳細はマニュアルのほか、成果物(/dojox/grid/compat/tests/support/)に含まれるサンプルファイルを参考にしてほしい。
強力なJavaScriptフレームワーク、どこで使うか
基本的な使い方とウィジェットを2つ紹介してきたが、このほかにもDojoは強力なUIが豊富に用意されている。特にDojoXという括りで呼ばれるライブラリ群は、一見しただけではJavaScriptだけで実現したとは思えないほどの高機能なUIが満載だ。
通常環境化での利用もさることながら、サーバサイドアプリケーションが利用できないといった制約がある環境下ではより強力な助っ人になるだろう。軽量フレームワークの利用が中心でまだDojoをさわってみてもない方もそうでない方も、ぜひ一度さわってみてほしい。