Как обновить ячейку сводной сетки w2ui?

Question

У меня есть сетка, где мне нужно показать сумму всех чисел в одном столбце. Числа доступны для редактирования в сетке, и сумма должна обновляться по мере изменения чисел (до сохранения). У меня несколько проблем. Соответствующий код показан ниже, а вот jsfiddle, если вы хотите поработать с работающей программой.

$(function() {
    $('#grid').w2grid({
        name: 'grid',
        columns: [{
            field: 'recid', caption: 'ID', size: '50px', sortable: true, attr: 'align=center'}, {
            field: 'lname', caption: 'Last Name', size: '150px', sortable: true }, 
            {field: 'amount', caption: 'Amount', size: '100px', render: 'money', editable: { type: 'money' }}, 
        ], 
        records: [{
            recid: 1, fname: 'Jane',  amount: 1000.00}, {
            recid: 2, fname: 'Stuart', amount: 1000.00}, {
            recid: 3, fname: 'Jin', amount: 1000.00}, {
            recid: 's-1', fname: '', amount: 0, w2ui: {summary: true}}
        ]
    });
    w2ui.grid.on('change', function(event) {
        event.done(function () {updateTotal(); });
    });    
    w2ui.grid.on('refresh', function(event) { updateTotal(); });
    w2ui.grid.on('render', function(event) {updateTotal(); });
});

function updateTotal() {
    var total = 0.0;
    for (var i = 0; i < w2ui.grid.records.length; i++) {
        if (typeof w2ui.grid.records[i].amount == "number") {
            total += w2ui.grid.records[i].amount;
        }
    }
    w2ui.grid.get('s-1').amount = total;
    w2ui.grid.refreshCell('s-1','amount');
    document.getElementById("gridtotal").innerHTML = '' + w2ui.grid.summary[0].amount  + '<br>w2ui.grid.records[0].amount = ' + w2ui.grid.records[0].amount;
}

Первая проблема - обновления в итоговой строке не отображаются. У меня есть обработчики onChange, onRefresh и onRender. Они переносят вызов updateTotal(), который добавляет "сумму" в каждую запись и сохраняет результат в поле суммы итоговой записи. Я звоню refreshCell после того, как сумма была изменена. Но ни один из обработчиков не вызывается, когда происходит начальное отображение сетки - поэтому итоговая запись показывает 0. Какой вызов должен быть сделан, чтобы обновить итоговую сумму, когда сетка первоначально отображается?

Вторая проблема - updateTotal() отображает результаты не в той ячейке. Нажмите кнопку, чтобы выполнить updateTotal(). Сумма 3000 является правильной для таблицы в ее первоначальном состоянии. Из строки, которая обновляет innerHTML, видно, что итоговая запись ('s-1') обновляется с правильным значением в поле 'amount', и что мы вызываем refreshCell('s-1','amount'), Но в сетке ячейка "количество" для recid 1 обновляется и показывает 3000 (и обратите внимание, что она отображается с выравниванием по левому краю, а не по правому краю). Почему это случилось? Какой вызов я должен сделать, чтобы обновить ячейку "сумма" в итоговой строке?

Третья проблема - когда пользователь вносит изменения в ячейки "сумма" (двойной щелчок для изменения суммы), происходит событие onChange, которое приводит к вычислению новой суммы. Но сделанные пользователем изменения не доступны в записях сетки. Изменения сохраняются в другом месте. Таким образом, вновь вычисленная сумма не соответствует числам, которые пользователь видит в сетке. Новые значения не доступны в записях (records[i].amount) до тех пор, пока не будут сохранены обновления. Но мне нужно получить доступ к суммам, отображаемым в сетке, прежде чем изменения будут сохранены. Как получить доступ к измененным значениям?

Answer 1

Чтобы изменить существующую запись, вам нужно использовать set метод - с get Вы не получаете ссылку, но копию!

 w2ui.grid.set('s-1', {amount: total});

О вашей первой проблеме: вы назначаете обратный вызов рендеринга после того, как сетка уже отрендерена. Вам нужно будет назначить обратный вызов в конструкторе:

  $('#grid').w2grid({
      onRender: ....
  });

Ваша вторая проблема больше не должна быть проблемой, когда вы используете set вместо того чтобы получить.

О вашей третьей проблеме: пока вы не сохраните изменения, они будут сохранены в record.w2ui.changes - так либо звони grid.save() или получить сумму из изменений, а не из исходной записи.

Обновленная скрипка:

http://jsfiddle.net/pfq20gnu/14/