業務でよく使われるグリッド（テーブル）についてはhifiveでも力を入れて取り組んでいます。今回は業務要件でありがちな、行を複数選択する機能について紹介します。
実際に動作している様子は以下の画像になります。
実際の動作はこちらで確認できます。
表示する際の設定
グリッド表示を行うDataGridを初期化する際に二つの変更を行います。まず、カラム表示を追加します。
以下の _selectCheckBox を追加することでカラムが追加されます。
次に表示設定を行います。幅は25px、リサイズ不可、値は選択した値としています。チェックボックスを表示する場合は cellFormatter.checkbox(true) を指定します。
これで表示側は完了です。
選択した際のイベントについて
次にチェックボックスをクリックした際のイベントについてです。 gridChangeDataSelect が呼ばれます。また、 getSelectedDataIdAll を呼ぶとチェックされたデータが一覧で取得できます。これは値だけが配列で入ってきます。
実際の動作はこちらで確認できます。
選択されているデータが取れれば、画面上に表示したり編集などを行うこともできるでしょう。さらなる活用は別な記事で紹介します。
