hifiveのデータグリッドライブラリを使いこなす（5）「データ編集」
業務要件でありがちな、データグリッド上でのデータ編集をhifiveのデータグリッド上でサポートする方法を紹介します。
今回のデモはこちらにあります。動作しているところは次の画像の通りです。
ベースとしてhifiveのデータグリッドライブラリを使いこなす（1）「グリッドの基本形」のグリッドを使います。
データを編集可能にする
グリッドを編集できる状態にするのは簡単です。初期化する際のパラメータで、 properties以下を変更します。例えば次のようにします。
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
| properties: { | |
| id: { | |
| size: 70, | |
| sortable: true | |
| }, | |
| name: { | |
| size: 100, | |
| sortable: true | |
| }, | |
| position: { | |
| formatter: cellFormatter.input('text'), | |
| changeHandler: changeHandler.edit() | |
| }, | |
| score: { | |
| formatter: cellFormatter.input('text'), | |
| changeHandler: changeHandler.edit(parseInt) | |
| }, | |
| select: { | |
| formatter: cellFormatter.select(['Option1', 'Option2', 'Option3']), | |
| changeHandler: changeHandler.edit() | |
| } | |
| } |
この時、最も簡単なテキストフィールドでの入力であれば、
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() | |
| }, |
のようにします。フォーマットとして cellFormatter.input('text') を指定します。そして変更後のハンドラーに対して changeHandler.edit() として変更後の値をそのまま適用します。
入力値の変換
入力値を変更したい場合、例えば数値だけ入力できるようにしたい場合は次のようにします。
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
| score: { | |
| formatter: cellFormatter.input('text'), | |
| changeHandler: changeHandler.edit(parseInt) | |
| }, |
changeHandler.edit(parseInt) として、入力値に対してparseIntを適用します。
リストから選択
さらに指定されたリストからしか選べないようにしたい場合は次のようにします。
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() | |
| } |
変更した場所が分かるようにする
さらに変更した際に変更したことが確認できるようにします。これは cellClassDefinition を変更します。
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
| view: { | |
| type: 'table', | |
| param: { | |
| cellClassDefinition: { | |
| editedCell: function(cell) { | |
| return cell.editedValue !== cell.originalValue; | |
| } | |
| }, |
このように指定することで変更後とオリジナルの値が変わっている場合、そのセルに対して editedCellというクラスが適用されます。cellには変更したセルのオブジェクトが入ります。後はスタイルシートで、
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
| .editedCell { | |
| background–color: #FFA; | |
| } |
としておけば変更後はセルの背景色が黄色くなります。
編集機能を使えばマスター編集のような機能であったり、検索結果をそのまま編集すると言った機能も簡単に実現できます。なお、編集後のデータベース適用については別途実装を行う必要があります。
デモを使ってグリッドの編集機能を試してみてください。
hifive開発者ブログ 
コメントは受け付けていません。