我有一个网格，我需要在一列中显示所有数字的总和。 这些数字在网格中是可编辑的，并且总和需要随着数字的变化而更新（在保存之前）。 我有多个问题。 相关的代码如下所示，如果你想要运行一个正常运行的程序， 这里是一个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'）称为refreshCell 。 但是在网格中，recid 1的'amount'单元格更新为显示3000（并且注意它被呈现为左对齐而不是右对齐）。 为什么发生这种情况？ 我应该做些什么来更新汇总行中的“金额”单元格？
第三个问题 - 当用户对“金额”单元格进行更改（双击以更改金额）时，会发生onChange事件，这会导致计算新总计。 但用户所做的更改在网格记录中不可用。 更改保存在不同的位置。 因此，新计算出的总数不符合用户在网格上看到的数字。 保存更新之前，新值在记录（记录[i] .amount）中不可用。 但是我需要在保存更改之前访问网格中显示的数量。 我如何访问更改的值？
I have a grid where I need to show the sum of all the numbers in one column. The numbers are editable in the grid, and the sum needs to be updated as the numbers change (before a Save). I am having multiple issues. The relevant code is shown below and here is a jsfiddle if you'd like to poke around with a functioning program.
$(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; }First issue -- updates to the summary row are not being displayed. I have onChange, onRefresh, and onRender handlers. They wrap a call to updateTotal(), which adds the 'amount' in every record and stores the result in the summary record's amount field. I call refreshCell after the amount has been changed. But none of the handlers are called when the initial display of the grid happens - so the summary record shows 0. What call should be made to update the summary amount when the grid is initially displayed?
Second issue -- updateTotal() displays results in the wrong cell. Click the button to execute updateTotal(). The sum of 3000 is correct for the table in its initial state. You can see from the line that updates the innerHTML that the summary record ('s-1') gets updated with the correct value in its 'amount' field, and that we call refreshCell('s-1','amount'). But on the grid, the 'amount' cell for recid 1 gets updated to show 3000 (and note that it gets rendered left-justified rather than right-justified). Why did this happen? What call should I make to update the 'amount' cell in the summary row?
Third issue -- as a user makes changes to the 'amount' cells (double-click to change the amount), the onChange event occurs which causes a new total to get calculated. But the changes made by the user are not available in the grid records. The changes are saved in a different location. So the newly calculated total does not correspond to the numbers the user sees on the grid. The new values are not available in the records (records[i].amount) until after updates are saved. But I need to access the amounts displayed in the grid before the changes are saved. How do I access the changed values?
最满意答案
要修改现有的记录，你需要使用set方法 - get你没有得到一个参考，但一个副本！
w2ui.grid.set('s-1', {amount: total});关于你的第一个问题：在网格已经被渲染之后，你正在分配一个渲染回调。 您将需要在构造函数中分配回调：
$('#grid').w2grid({ onRender: .... });当你使用set而不是get时，你的第二个问题不再是一个问题。
关于第三个问题：在保存更改之前，更改将存储在record.w2ui.changes - 因此请调用grid.save()或从更改中获取金额，而不是从原始记录中获取金额。
更新小提琴：
http://jsfiddle.net/pfq20gnu/14/
To modify an existing record, you need to use the set method - with get you do not get a reference, but a copy!
w2ui.grid.set('s-1', {amount: total});About your first issue: You are assigning a render callback after the grid is already rendered. You will need to assign the callback in the constructor:
$('#grid').w2grid({ onRender: .... });Your second issue should no longer be an issue when you use set instead of get.
About your third issue: until you save the changes, the changes are stored in record.w2ui.changes - so either call grid.save() or get the amount from the changes, not from the original record.
Updated fiddle:
http://jsfiddle.net/pfq20gnu/14/
更多推荐
发布评论