コンテンツへスキップ

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

by : 2017/04/11

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

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

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

表示する際の設定

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

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


mapper: {
type: 'property',
param: {
:
visibleProperties: {
header: ['_selectCheckBox', 'id'],
:
},
:
}
},

view raw

index.js

hosted with ❤ by GitHub

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


properties: {
_selectCheckBox: {
size: 25,
enableResize: false,
toValue: function(data, cell) {
return cell.isSelectedData;
},
formatter: cellFormatter.checkbox(true),
changeHandler: changeHandler.selectData()
},
:
}

view raw

index.js

hosted with ❤ by GitHub

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

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

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


'#grid gridChangeDataSelect': function() {
var selectedDataIds = this._gridController.getSelectedDataIdAll();
$("#event").text("チェックをつけました。"+selectedDataIds);
},

view raw

index.js

hosted with ❤ by GitHub

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

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

banner_02

From → hifive

コメントは受け付けていません。

%d人のブロガーが「いいね」をつけました。