グリッドに複数選択可能なチェックボックスを追加する
業務でよく使われるグリッド(テーブル)についてはhifiveでも力を入れて取り組んでいます。今回は業務要件でありがちな、行を複数選択する機能について紹介します。
実際に動作している様子は以下の画像になります。
実際の動作はこちらで確認できます。
表示する際の設定
グリッド表示を行うDataGridを初期化する際に二つの変更を行います。まず、カラム表示を追加します。
以下の _selectCheckBox
を追加することでカラムが追加されます。
mapper: { | |
type: 'property', | |
param: { | |
: | |
visibleProperties: { | |
header: ['_selectCheckBox', 'id'], | |
: | |
}, | |
: | |
} | |
}, |
次に表示設定を行います。幅は25px、リサイズ不可、値は選択した値としています。チェックボックスを表示する場合は cellFormatter.checkbox(true)
を指定します。
properties: { | |
_selectCheckBox: { | |
size: 25, | |
enableResize: false, | |
toValue: function(data, cell) { | |
return cell.isSelectedData; | |
}, | |
formatter: cellFormatter.checkbox(true), | |
changeHandler: changeHandler.selectData() | |
}, | |
: | |
} |
これで表示側は完了です。
選択した際のイベントについて
次にチェックボックスをクリックした際のイベントについてです。 gridChangeDataSelect
が呼ばれます。また、 getSelectedDataIdAll
を呼ぶとチェックされたデータが一覧で取得できます。これは値だけが配列で入ってきます。
'#grid gridChangeDataSelect': function() { | |
var selectedDataIds = this._gridController.getSelectedDataIdAll(); | |
$("#event").text("チェックをつけました。"+selectedDataIds); | |
}, |
実際の動作はこちらで確認できます。
選択されているデータが取れれば、画面上に表示したり編集などを行うこともできるでしょう。さらなる活用は別な記事で紹介します。
コメントは受け付けていません。