コンテンツへスキップ

hifiveのデータグリッドライブラリを使いこなす(5)「データ編集」

by : 2017/04/13

業務要件でありがちな、データグリッド上でのデータ編集をhifiveのデータグリッド上でサポートする方法を紹介します。

今回のデモはこちらにあります。動作しているところは次の画像の通りです。

ベースとしてhifiveのデータグリッドライブラリを使いこなす(1)「グリッドの基本形」のグリッドを使います。

データを編集可能にする

グリッドを編集できる状態にするのは簡単です。初期化する際のパラメータで、 properties以下を変更します。例えば次のようにします。


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()
}
}

view raw

index.js

hosted with ❤ by GitHub

この時、最も簡単なテキストフィールドでの入力であれば、


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

view raw

index.js

hosted with ❤ by GitHub

のようにします。フォーマットとして cellFormatter.input('text') を指定します。そして変更後のハンドラーに対して changeHandler.edit() として変更後の値をそのまま適用します。

入力値の変換

入力値を変更したい場合、例えば数値だけ入力できるようにしたい場合は次のようにします。


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

view raw

index.js

hosted with ❤ by GitHub

changeHandler.edit(parseInt) として、入力値に対してparseIntを適用します。

リストから選択

さらに指定されたリストからしか選べないようにしたい場合は次のようにします。


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

view raw

index.js

hosted with ❤ by GitHub

変更した場所が分かるようにする

さらに変更した際に変更したことが確認できるようにします。これは cellClassDefinition を変更します。


view: {
type: 'table',
param: {
cellClassDefinition: {
editedCell: function(cell) {
return cell.editedValue !== cell.originalValue;
}
},

view raw

index.js

hosted with ❤ by GitHub

このように指定することで変更後とオリジナルの値が変わっている場合、そのセルに対して editedCellというクラスが適用されます。cellには変更したセルのオブジェクトが入ります。後はスタイルシートで、


.editedCell {
backgroundcolor: #FFA;
}

view raw

index.js

hosted with ❤ by GitHub

としておけば変更後はセルの背景色が黄色くなります。


編集機能を使えばマスター編集のような機能であったり、検索結果をそのまま編集すると言った機能も簡単に実現できます。なお、編集後のデータベース適用については別途実装を行う必要があります。

デモを使ってグリッドの編集機能を試してみてください。

データグリッド – データ編集機能

banner_02

From → hifive

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

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