CodeZine(コードジン)

特集ページ一覧

Dojo ToolkitのDataGridを使いこなす

渋谷テクニカルナイト講師陣が語る新技術動向 第2回

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2009/02/04 14:00

目次

データの書式

 次にData Storeの他のフィールド、birthDate、group、photoも表示することにしましょう。ただし、JSONデータに記述されているように、birthDateやgroupは数値表現、photoはURLなので、そのまま表示しても、視覚化したとは言えません。そこで、DataGridのformatterの機能を使って、分かりやすい書式に変換してみます。

 まず、birthDate用、group用、photo用に、それぞれ以下の関数をHTMLの<script>タグ内に記述します。

dojo.require("dojo.date.locale");

function myDateFormatter(date){
    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){
    return "<img width='40' height='40' src='" + url + "'/>";
};

 これらの関数により、birthDateとgroupはテキスト文字列に、photoは<img>タグに変換されます。それぞれのビューの定義に対応する関数を太字部分のように指定します。

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

 formatterを利用したDataGridの表示は次のようになります(※DataGridのwidth/heightを適宜調整し、画像も別途用意しています)。

セルのスタイル

 DataGridのセルの色、フォントなどのスタイルは、DataGrid用のCSSで指定されていますが、特定のカラムや行のスタイルをカスタマイズすることもできます。

 次の例は、ビュー定義でemailカラムのスタイルを定義しています。

var myDataGridStructure = [
    {cells: [
        {name: "画像", field: "photo", width: "40px",
            formatter: myImageFormatter},
        {name: "名前", field: "name", width: "auto"},
        {name: "メールアドレス", field: "email", width: "auto",
            styles: "color: red; background-color: yellow;"},
        {name: "生年月日", field: "birthDate", width: "auto",
            formatter: myDateFormatter},
        {name: "グループ", field: "group", width: "40px",
            formatter: myGroupFormatter}
    ]}
];

 これにより、DataGridの表示は次のようになります。

 ビュー定義のstylesプロパティの他にも、headerStylesclassescellClassesなどのプロパティにCSSスタイルやクラス名を記述して、カラムのヘッダやセルのスタイルをカスタマイズしたり、DataGridのonStyleRow()メソッドをオーバーライドして、行ごとのスタイルを変更することも可能です。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:渋谷テクニカルナイト講師陣が語る新技術動向

もっと読む

著者プロフィール

  • 野口 雅人(ノグチ マサト)

    日本アイ・ビー・エム株式会社 ソフトウェア開発研究所 シニア・テクニカ ル・スタッフ・メンバー 1990年、日本IBM入社。ホームページ・ビルダー、Rational Application Developer などの製品開発に従事。現在はWeb 2.0/RIA関連のソフトウェア開発を担当。

あなたにオススメ

All contents copyright © 2005-2022 Shoeisha Co., Ltd. All rights reserved. ver.1.5