グリッドに複数選択可能なチェックボックスを追加する

業務でよく使われるグリッド（テーブル）についてはhifiveでも力を入れて取り組んでいます。今回は業務要件でありがちな、行を複数選択する機能について紹介します。

実際に動作している様子は以下の画像になります。

実際の動作はこちらで確認できます。

表示する際の設定

グリッド表示を行うDataGridを初期化する際に二つの変更を行います。まず、カラム表示を追加します。

以下の _selectCheckBox を追加することでカラムが追加されます。

次に表示設定を行います。幅は25px、リサイズ不可、値は選択した値としています。チェックボックスを表示する場合は cellFormatter.checkbox(true) を指定します。

これで表示側は完了です。

選択した際のイベントについて

次にチェックボックスをクリックした際のイベントについてです。 gridChangeDataSelect が呼ばれます。また、 getSelectedDataIdAll を呼ぶとチェックされたデータが一覧で取得できます。これは値だけが配列で入ってきます。

実際の動作はこちらで確認できます。

選択されているデータが取れれば、画面上に表示したり編集などを行うこともできるでしょう。さらなる活用は別な記事で紹介します。