0

我有一个网格，我需要在一列中显示所有数字的总和。这些数字在网格中是可编辑的，并且总和需要随着数字的变化而更新（在保存之前）。我有多个问题。相关代码如下所示，如果您想使用功能正常的程序 ，这里是一个 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) 中不可用。但我需要在保存更改之前访问网格中显示的金额。如何访问更改的值？

4

1 回答 1

0

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

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

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

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

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

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

更新的小提琴：

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

于 2017-03-13T12:19:31.570 回答