如何更新 w2ui 网格摘要单元格？

Question

我有一个网格，我需要在其中显示一列中所有数字的总和。网格中的数字是 editable，总和需要随着数字的变化而更新（在保存之前）。我有多个问题。相关代码如下所示，here is a 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() 的调用，它在每条记录中添加 'amount' 并将结果存储在摘要记录的金额字段中。金额更改后，我调用 refreshCell。但是 none 的处理程序在网格的初始显示发生时被调用 - 因此汇总记录显示 0。当网格初始显示时应该调用什么来更新汇总量？

第二个问题 -- updateTotal() 在错误的单元格中显示结果。单击按钮执行 updateTotal()。 3000 的总和对于处于初始状态的 table 是正确的。您可以从更新 innerHTML 的行中看到摘要记录 ('s-1') 在其 'amount' 字段中更新为正确的值，并且我们调用 refreshCell('s-1','amount').但是在网格上，recid 1 的 'amount' 单元格被更新为显示 3000（请注意它呈现为左对齐而不是右对齐）。为什么会这样？我应该调用什么来更新摘要行中的 'amount' 单元格？

第三个问题 -- 当用户对 'amount' 单元格进行更改（双击以更改数量）时，会发生 onChange 事件，从而导致计算新的总计。但是用户所做的更改在网格记录中不可用。更改保存在不同的位置。因此，新计算的总数与用户在网格上看到的数字不对应。在保存更新之前，新值在记录 (records[i].amount) 中不可用。但是我需要在保存更改之前访问网格中显示的金额。如何访问更改后的值？

Answer 1

要修改现有记录，您需要使用 set 方法 - 使用 get 您不是获得参考，而是副本！

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

关于您的第一个问题：您在网格已呈现后分配呈现回调。您需要在构造函数中分配回调：

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

当您使用 set 而不是 get 时，您的第二个问题应该不再是问题。

关于你的第三个问题：在你保存更改之前，更改存储在 record.w2ui.changes - 所以要么调用 grid.save() 要么从更改中获取金额，而不是从原始记录中获取金额。

已更新fiddle：

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

如何更新 w2ui 网格摘要单元格？

How do you update a w2ui grid summary cell?

w2ui