コンテンツへスキップ

hifiveのデータグリッドライブラリを使いこなす(6)「グリッドで使える入力フォーマットについて」

by : 2017/04/26

グリッドを使ってデータを一覧表示した際に出てくるニーズとして、一覧表の中でデータを修正したいというのがあります。一括修正であったり、インラインで一項目ずつその場で修正できて欲しいと言った要望があるでしょう。

hifiveのデータグリッドでも幾つかのデータ入力に対応していますので、今回はそれを紹介します。

cellFormatterの利用

入力をコントロールに変更する場合は cellFormatter を使います。現在、以下の4つをサポートしています。

テキスト入力

テキスト入力の場合、inputメソッドを使います。引数はtype属性に使われるので、datetimeやpasswordなどを指定することができます。


position: {
formatter: cellFormatter.input('text'),
changeHandler: changeHandler.edit()
},

view raw

index.js

hosted with ❤ by GitHub

チェックボックス

チェックボックスはcheckboxメソッドを使います。


check: {
formatter: cellFormatter.checkbox('check'),
},

view raw

index.js

hosted with ❤ by GitHub

ラジオボタン

ラジオボタンはradioメソッドを使います。


radio: {
formatter: cellFormatter.radio(),
},

view raw

index.js

hosted with ❤ by GitHub

ドロップダウン

ドロップダウンリストはselectを使います。引数はオプション項目になります。


select: {
formatter: cellFormatter.select(['Option1', 'Option2', 'Option3']),
changeHandler: changeHandler.edit()
}

view raw

index.js

hosted with ❤ by GitHub


デモをJSFiddleに置いてあります。グリッド表示がどのように変わるか、チェックしてください。

banner_02

From → hifive

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

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