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

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

カラム表示のカスタマイズ

　以前の記事では、columnReorderingプロパティを指定して、ユーザーがドラッグ＆ドロップでカラムの並び順を変更できるようにする方法を紹介しましたが、アプリケーションによっては、ユーザーがカラムの表示、非表示を切り替えることができるようにする要件もあるかもしれません。DataGridはカラムの表示、非表示を切り替えるビルトインのUIは提供していませんが、APIでアプリケーションが表示、非表示をコントロールできるようになっています。

　以下の例では、チェック・ボックスを使ってカラムの表示、非表示を切り替えています。チェック・ボックスのonChangeコールバックで、DataGridのlayoutプロパティのsetColumnVisibilityメソッドを呼び出します。setColumnVisibilityメソッドには、第一引数に表示を切り替えるカラムのインデックス（structureプロパティのcellsに指定した順番。0から始まります）、第2引数に表示ならtrue、非表示ならfalseを渡します（チェック・ボックスのonChangeコールバックの引数にはチェック・ボックスのオン、オフを示すbooleanの値が渡ってきますので、そのままsetColumnVisibilityメソッドに渡します）。

function setupCheckBoxes(){
    var myDataGrid = dijit.byId("myDataGrid");
    dojo.connect(dijit.byId("myCheckBox1"), "onChange", function(value){
        myDataGrid.layout.setColumnVisibility(0, value);
    });
    dojo.connect(dijit.byId("myCheckBox2"), "onChange", function(value){
        myDataGrid.layout.setColumnVisibility(1, value);
    });
    dojo.connect(dijit.byId("myCheckBox3"), "onChange", function(value){
        myDataGrid.layout.setColumnVisibility(2, value);
    });
    dojo.connect(dijit.byId("myCheckBox4"), "onChange", function(value){
        myDataGrid.layout.setColumnVisibility(3, value);
    });
    dojo.connect(dijit.byId("myCheckBox5"), "onChange", function(value){
        myDataGrid.layout.setColumnVisibility(4, value);
    });
};

dojo.addOnLoad(setupCheckBoxes);

実行結果

　メールアドレスのチェック・ボックスをクリックしてオフにするとDataGridのメールアドレスのカラムが非表示になります。

実行結果

　DataGridのlayoutプロパティには、setColumnVisibilityの他にもcolumnReorderingを指定したときに内部的に呼び出されるmoveColumnメソッドも提供されていますので、このメソッドを使って、カラムの並び順を変更する独自のUIを実装することも可能です。