Dojo ToolkitのDataGridを使いこなす

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

データの書式

　次に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プロパティの他にも、headerStyles、classes、cellClassesなどのプロパティにCSSスタイルやクラス名を記述して、カラムのヘッダやセルのスタイルをカスタマイズしたり、DataGridのonStyleRow()メソッドをオーバーライドして、行ごとのスタイルを変更することも可能です。