TreeGrid
DataGridの拡張ウィジェットとしてはTreeGridも提供されています。TreeGridは、データAPI経由でアクセスされるツリー構造を持ったデータをDataGridで表示するためのものです。複数の階層のデータを、フォルダを開いたり、閉じたりする要領で閲覧できます。
TreeGridを有効に利用するには、まずデータ・ストアで階層構造を持ったデータを提供する必要があります。これまでサンプルで使ってきたデータをグループとそのメンバーの2階層で構成されるデータ構造に変更します。
var myDataStore = new dojo.data.ItemFileWriteStore({data: {items: [
{group: 1, members: [
{name: "山田民子", email: "yamada@ibm.com",
birthDate: 586882800000, photo: "images/photo4.gif"},
（中略）
]},
{group: 2, members: [
{name: "佐藤花子", email: "satoh@ibm.com",
birthDate: 450457200000, photo: "images/photo2.gif"},
（中略）
]},
{group: 3, members: [
{name: "鈴木一郎", email: "suzuki@ibm.com",
birthDate: 250555200000, photo: "images/photo1.gif"},
（中略）
]}
], label: "name"}});
TreeGridでは、内部でデータAPIのgetLabelAttributesメソッドを使用します。ItemFileWriteStoreでは、labelプロパティで、labelとして使われる属性を指定できます。
次にビュー定義で階層構造の表示方法を記述します。データ・ストアのmembers属性が2階層目の項目リストになるようにchildrenプロパティで記述しています。
var myStructure = [
{cells: [[
{name: "グループ", field: "group", width: "60px",
formatter: myGroupFormatter},
{field: "members", children: [
{name: "画像", field: "photo", width: "50px",
formatter: myImageFormatter},
{name: "名前", field: "name", width: "auto"},
{name: "メールアドレス", field: "email", width: "auto"},
{name: "生年月日", field: "birthDate", width: "auto",
formatter: myDateFormatter}
], aggregate: "value"}
]]}
];
aggregateプロパティには、以下の集計のタイプ（TreeGridの集計メソッド名）を指定することができます。
- sum
- cnt
- value
階層化されたフィールドの数値データを累計して、集計結果として表示します。省略時値です。
階層化されたフィールドが値を持つ個数をカウントして、集計結果として表示します。labelとして指定された属性に対しては、自動的にcntが使われます。
空の集計メソッドとして定義されているので、集計を表示しません。
TreeGridをマークアップで作成して、上記のデータ・ストアとビューの定義を指定します。
<table dojoType="dojox.grid.TreeGrid" id="myTreeGrid"
style="width: 500px; height: 200px;"
store="myDataStore" structure="myStructure"></table>
次の画面は「－」アイコンをクリックして「家族」グループを閉じた状態です。家族グループのメンバーの数（3）が集計されて表示されています。
数値データの場合は、カラムごとの数値の集計ができますので、ビジネス・アプリケーションではさらに威力を発揮するでしょう。
まとめ
今回紹介したように、DataGridやその拡張ウィジェットには、アプリケーションの機能要件を満たすためのさまざまな機能が提供されています。これらの機能と他のウィジェットやこのシリーズの最初で取り上げたグラフ機能などを組み合わせることで、高機能で使いやすいUIを備えたWebアプリケーションを構築することができます。また、DataGridは前回の記事で解説されているデータAPIを利用しているので、サーバー上で提供されるサービスに効率よくアクセスできるというメリットもあります。Webブラウザーでアクセスできる使い勝手のよいビジネス・アプリケーションの構築にぜひDataGridを活用してください。
