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

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

行やカラムをまたがるセルの表示

　では、このサンプルをもとに、セルの表示をカスタマイズしましょう。まず、画像は他のデータより高さをとるので、画像以外のデータを2段に表示することにしましょう。その際に、メールアドレスは他のデータより長い可能性があるので、メールアドレスだけを2段目に、残りのデータを一段目に表示します。

　ビューの定義（structure）のcellsプロパティには、カラム定義の配列を指定していましたが、この配列を入れ子（2次元配列）にすることで、各データ項目を複数行で表示させることができます。HTMLのtdやthタグでの複数行、複数カラムの指定と同様に、rowSpanプロパティで複数行にまたがるセルを、colSpanで複数カラムにまたがるセルを指定できます。ここでは、画像を2行にまたがり、メールアドレスを3カラムにまたがるように指定します。

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

実行結果

　ビュー定義をうまく指定することで、情報量が多いデータ項目も段組を工夫して効率よく表示することができます。

複数ビューの利用

　複数のビューを指定して、DataGridの表示を横方向に分割することもできます。例えば、項目名のカラムを左側に固定して、多数のフィールドを横スクロールして閲覧するような場合には、複数ビューの利用が有効です。複数ビューは以下のように、structureプロパティに指定する配列にビュー定義を複数指定することで実装できます。

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

実行結果

　ビューが分割され、垂直スクロール・バーは2つ表示されますが、どちらのスクロール・バーを操作しても、両方のビューは連動してスクロールします。