データの書式
次に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()メソッドをオーバーライドして、行ごとのスタイルを変更することも可能です。
