Dojo道場 ～ 第3回「DataGridをもっと使いこなす」

「Dojo道場」～実用アプリ構築のためのベストプラクティス

　本シリーズでは、豊富な機能の中から厳選した、ビジネス・アプリケーションのためのベスト・プラクティスを中心に、Dojo Toolkitの活用方法をご紹介します。連載の第3回である今回は、実際のアプリケーションの要件を満たすための一歩進んだDataGridの機能を解説します。

はじめに

　多彩なDojo Toolkitの機能の中でも、ビジネス・アプリケーションの構築に欠かせないコンポーネントとして、以前の記事『Dojo ToolkitのDataGridを使いこなす』でも取り上げたDataGrid。典型的な表形式データの表示、編集機能に加えて、行、カラム表示のカスタマイズや新たに追加されたEnhancedGrid、TreeGridといった派生クラスの機能など、前回ご紹介しきれなかった機能、利用法がまだまだあります。今回は実際のアプリケーションの要件を満たすための一歩進んだ機能を解説します。

DataGridの作成

　はじめに、以前の記事のサンプル・コードでDataGrid作成の基本をおさらいしましょう。

1. DataGridを利用するには、まず最初にDataGridモジュールを読み込みます。

dojo.require("dojox.grid.DataGrid");

　また、スタイルシートを記述する箇所で、DataGridのスタイルシートも読み込んでおきます。今回はDojo 1.5で追加されたclaroテーマ用のスタイルシートを使います。

@import "../dojo-release-1.5.0/dojox/grid/resources/claroGrid.css";

2. DataGridは、前回の記事でも紹介したDojo ToolkitのデータAPIを利用してデータにアクセスしますので、DataGridに表示するデータ用のデータ・ストアを作成します。

var myDataStore = new dojo.data.ItemFileReadStore({data: {items: [
    {name: "鈴木一郎", email: "[e-mail]",
        birthDate: 250555200000, photo: "images/photo1.gif", group: 3},
（中略）
]}});

3. 画像のURLや日付などの数値情報を分かりやすく表示するために formatter関数を定義します。

function myDateFormatter(date){
    if(!date) return "";
    return dojo.date.locale.format(new Date(date), {fullYear: true, selector: "date"});
};

function myGroupFormatter(group){
    switch(group){
    case 1: return "家族";
    case 2: return "友人";
    case 3: return "会社";
    default: return "";
    }
};

function myImageFormatter(url){
    if(!url) url = dojo.moduleUrl("dojo", "resources/blank.gif").toString();
    return "<img width='40' height='40' src='" + url + "'/>";
};

4. カラムごとの情報を記述してDataGridのビューを定義します。上記のformatter関数もここでカラムと結び付けます。

var myStructure = [
    {cells: [
        {name: "画像", field: "photo", width: "50px",
            formatter: myImageFormatter},
        {name: "名前", field: "name", width: "auto"},
        {name: "メールアドレス", field: "email", width: "auto"},
        {name: "生年月日", field: "birthDate", width: "auto",
            formatter: myDateFormatter},
        {name: "グループ", field: "group", width: "60px",
            formatter: myGroupFormatter}
    ]}
];

5. 最後にHTMLマークアップで、データ・ストアやビューの定義を指定して、DataGridを作成します（DataGridの作成はJavaScriptでも行えます）。

<table dojoType="dojox.grid.DataGrid" id="myDataGrid"
    style="width: 500px; height: 200px;"
    store="myDataStore" structure="myStructure"></table>

　以上の手順で以下のようなDataGridが表示されます。

実行結果