hifiveのデータグリッドライブラリを使いこなす（6）「グリッドで使える入力フォーマットについて」
グリッドを使ってデータを一覧表示した際に出てくるニーズとして、一覧表の中でデータを修正したいというのがあります。一括修正であったり、インラインで一項目ずつその場で修正できて欲しいと言った要望があるでしょう。
hifiveのデータグリッドでも幾つかのデータ入力に対応していますので、今回はそれを紹介します。
cellFormatterの利用
入力をコントロールに変更する場合は cellFormatter を使います。現在、以下の4つをサポートしています。
テキスト入力
テキスト入力の場合、inputメソッドを使います。引数はtype属性に使われるので、datetimeやpasswordなどを指定することができます。
| position: { | |
| formatter: cellFormatter.input('text'), | |
| changeHandler: changeHandler.edit() | |
| }, |
チェックボックス
チェックボックスはcheckboxメソッドを使います。
| check: { | |
| formatter: cellFormatter.checkbox('check'), | |
| }, |
ラジオボタン
ラジオボタンはradioメソッドを使います。
| radio: { | |
| formatter: cellFormatter.radio(), | |
| }, |
ドロップダウン
ドロップダウンリストはselectを使います。引数はオプション項目になります。
| select: { | |
| formatter: cellFormatter.select(['Option1', 'Option2', 'Option3']), | |
| changeHandler: changeHandler.edit() | |
| } |
デモをJSFiddleに置いてあります。グリッド表示がどのように変わるか、チェックしてください。
コメントは受け付けていません。