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