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

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

EnhancedGrid

　Dojo 1.4から、通常のDataGridを拡張したEnhancedGridが提供されています。EnhancedGridは、拡張機能を「プラグイン」という手法で提供していますので、使いたい機能を個別に追加することができます。現在EnhancedGridで提供されているプラグイン機能は以下のとおりです。

• NestedSorting

通常のDataGridでは、一度に1つのカラムでしかソートできませんが、このプラグインにより、優先順位をつけた複数のカラムでソートするUIが提供されます。

• IndirectSelection

チェック・ボックス（複数選択）あるいはラジオ・ボタン（単一選択）を表示して、行単位の選択を使いやすくします。

• Menu

ヘッダーやセルなどを対象にしたコンテキスト・メニューを定義することができます。

• DnD

ドラッグ＆ドロップによりカラムや行を移動したり、マウスのドラッグ（スイープ）で複数の行やカラムを選択できるようになります。

　プラグインを使うにはまずプラグインのパッケージを読み込みます。

dojo.require("dojox.grid.enhanced.plugins.NestedSorting");
dojo.require("dojox.grid.enhanced.plugins.IndirectSelection");
dojo.require("dojox.grid.enhanced.plugins.Menu");
dojo.require("dojox.grid.enhanced.plugins.DnD");

　Menu以外のプラグインはpluginsプロパティの対応する子プロパティにtrueを指定するだけで有効にすることができます。Menuの指定については後ほど紹介しますが、ここでは他のプラグインを有効にしてみましょう。

var myPlugins = {
    nestedSorting: true,
    indirectSelection: true,
    dnd: true
};

　DataGridのマークアップをEnhancedGridに変更して、pluginsプロパティを指定します。

<table dojoType="dojox.grid.EnhancedGrid" id="myEnhancedGrid"
    style="width: 500px; height: 230px;"
    store="myDataStore" structure="myStructure" plugins="myPlugins"></table>
</body>

実行結果

　ヘッダーのカラムをクリックして、複数のカラムでのソートができます。以下は、グループでソートした後で、メールアドレスでソートした結果です。

実行結果

　次は、複数の行を選択して、ドラッグ＆ドロップで移動している画面です。

実行結果