グリッド - 一覧や表計算ソフトのようなUIを実装したいときに

表計算ソフトのようなUIをWebアプリケーションで実現する場合、グリッドが活躍するだろう。

Dojoでは「Grid」、Yahoo UIでは「DataTable」という名で実装されている。またjQueryではFlexigridなどのプラグインを使用することでグリッドを実現することが可能だ。Flexigridを用いたグリッド表示については「【ハウツー】わずか数行で"ものすごいテーブル"に! - jQueryプラグイン「Flexigrid」」を参考にしてほしい。

Dojoの場合、JSONをはじめとしたXML・CSVといった形式での表示方法が用意されている。ここではCSV形式でデータを格納し、<table>にstoreとしてロードする実装方法を紹介する。

HTMLファイル - grid-dojo.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/dojo/dojox/grid/_grid/Grid.css" rel="stylesheet" type="text/css">
<link href="./js/dojo/dojox/grid/_grid/tundraGrid.css" rel="stylesheet" type="text/css">
<title>Grid / Dojo</title>
<script type="text/javascript" src="./js/dojo/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-dojo.csv'});
-->
</script>
</head>

<body class="tundra">

<h1>Grid / Dojo</h1>

<table style="width: 400px; height: 120px;"
    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-dojo.csv

Name, Version
jQuery, 1.2.6
YUI, 2.6.0
Dojo, 1.2

Firefoxでの動作イメージ

Internet Explorerでの動作イメージ。Versionでソートをかけている

必要なライブラリのロード、表示データの指定、少しのコンフィグを書くだけでかなりの機能が用意されたグリッドを作成することが可能だ。クライアントサイドでのソートはもちろん、リサイズも可能。初回ロードに時間がかかること以外は、かなりの使い勝手と言えるだろう。