登場して間もない最新版で学ぶ「Dojo Toolkit」

使いこなしたい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/)に含まれるサンプルファイルを参考にしてほしい。