行の編集後の値を取得するにはonCompleteにて

w2uiで行の編集を行われた事を検知するイベントは以下のように記述する。

$('#grid').w2grid({
    name : 'grid',
    columns: [                
        { field: 'recid', caption: 'ID', size: '50px' },
        { field: 'lname', caption: 'Last Name', size: '30%' },
        { field: 'fname', caption: 'First Name', size: '30%' }
    ],
    onChange: function (event) {
        // 変更があった時に呼ばれる。
    }
});

ただし、onChangeは変更がキャンセル出来るように変更が完了する前に呼び出されるためrow.changesには変更した箇所が設定されていない。

onChange: function (event) {
    // 変更があった行をrecidから取得
    var row = w2ui['grid'].get(event.recid);
    // 変更箇所を行にマージ(したいが期待した結果にはならない)
    var chgRow = $.extend(row, row.changes);
}

変更が行われた場合に、変更箇所を取得するにはonCompleteに処理を記載する必要がある。 これで変更が完了した際に呼ばれるので、row.changesには変更箇所のプロパティと値が格納される。

onChange: function (event) {
    event.onComplete = function () {
        var row = w2ui[id].get(event.recid);
        // 変更箇所を変更前の行にマージ
        var chgRow = $.extend(row, row.changes);

        // 変更後の行を使ってごにょごにょ
    };
}