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

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

コンテキスト・メニューの表示

　今度はMenuプラグインを使って、コンテキスト・メニューを表示してみましょう。Menuプラグインで指定できるコンテキスト・メニューには以下のタイプがあります。

• headerMenu

ヘッダーのカラムをポイントして表示されるメニュー

• cellMenu

セル上で表示されるメニュー

• rowMenu

行をポイントして表示されるメニュー

• selectedRegionMenu

選択上で表示されるメニュー

　表示するメニューを別途作成しておき、pluginsプロパティには、作成したメニューのIDを指定します。次の例ではheaderMenuを指定しています。

var myPlugins = {
    menus: {
        headerMenu: "myMenu"
    }
};

　では、このメニューにチェック・ボックス付きのメニュー項目を追加して、先ほどは、チェック・ボックスを使って実装したカラムの表示、非表示機能を実現してみましょう。上記のpluginsプロパティを指定して、EnhancedGridを生成します。この例ではメニューも同時に作成しています。

<table dojoType="dojox.grid.EnhancedGrid" id="myEnhancedGrid"
    style="width: 500px; height: 230px;"
    store="myDataStore" structure="myStructure" plugins="myPlugins"></table>
<div dojoType="dijit.Menu" id="myMenu" style="display: none;">
    <div dojoType="dijit.CheckedMenuItem" id="myMenuItem1" checked="true">画像</div>
    <div dojoType="dijit.CheckedMenuItem" id="myMenuItem2" checked="true">名前</div>
    <div dojoType="dijit.CheckedMenuItem" id="myMenuItem3" checked="true">メールアドレス</div>
    <div dojoType="dijit.CheckedMenuItem" id="myMenuItem4" checked="true">生年月日</div>
    <div dojoType="dijit.CheckedMenuItem" id="myMenuItem5" checked="true">グループ</div>
</div>

　先ほどと同じように、チェック・ボックス付メニューのonChangeコールバックを追加します。

function setupMenuItems(){
    var myEnhancedGrid = dijit.byId("myEnhancedGrid");
    dojo.connect(dijit.byId("myMenuItem1"), "onChange", function(value){
        myEnhancedGrid.layout.setColumnVisibility(0, value);
    });
    dojo.connect(dijit.byId("myMenuItem2"), "onChange", function(value){
        myEnhancedGrid.layout.setColumnVisibility(1, value);
    });
    dojo.connect(dijit.byId("myMenuItem3"), "onChange", function(value){
        myEnhancedGrid.layout.setColumnVisibility(2, value);
    });
    dojo.connect(dijit.byId("myMenuItem4"), "onChange", function(value){
        myEnhancedGrid.layout.setColumnVisibility(3, value);
    });
    dojo.connect(dijit.byId("myMenuItem5"), "onChange", function(value){
        myEnhancedGrid.layout.setColumnVisibility(4, value);
    });
};

dojo.addOnLoad(setupMenuItems);

　上記の設定により、ヘッダー上でマウスの右ボタンをクリックするとメニューが表示され、カラムの表示、非表示を切り替えることができます。

実行結果