Wie aktualisierst du eine w2ui-Gitterzusammenfassungszelle?

Question

Ich habe ein Raster, wo ich die Summe aller Zahlen in einer Spalte zeigen muss. Die Zahlen können im Raster bearbeitet werden, und die Summe muss aktualisiert werden, wenn sich die Zahlen ändern (vor einem Speichern). Ich habe mehrere Probleme. Der entsprechende Code ist unten abgebildet und here is a jsfiddle wenn Sie mit einem funktionierenden Programm herumstöbern möchten.

$(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; 
} 

Erstes Problem - Aktualisierungen der Übersichtszeile werden nicht angezeigt. Ich habe onChange, onRefresh und onRender-Handler. Sie wickeln einen Aufruf an updateTotal() um, der die "Menge" in jedem Datensatz hinzufügt und das Ergebnis im Summenfeld des Summensatzes speichert. Ich rufe refreshCell auf, nachdem der Betrag geändert wurde. Aber keiner der Handler wird aufgerufen, wenn die anfängliche Anzeige des Gitters erfolgt - also zeigt der Zusammenfassungseintrag 0 an. Welcher Aufruf sollte durchgeführt werden, um den Zusammenfassungsbetrag zu aktualisieren, wenn das Raster anfänglich angezeigt wird?

Zweiter Fehler - updateTotal() zeigt die Ergebnisse in der falschen Zelle an. Klicken Sie auf die Schaltfläche, um updateTotal() auszuführen. Die Summe von 3000 ist für die Tabelle in ihrem Anfangszustand korrekt. In der Zeile, die innerHTML aktualisiert, wird angezeigt, dass der Zusammenfassungsdatensatz ('s-1') mit dem korrekten Wert im Feld 'Betrag' aktualisiert wird und wir refreshCell ('s-1', 'betrag') aufrufen. . Aber im Raster wird die Zelle "Betrag" für Rückbuchungsnummer 1 auf 3000 aktualisiert (und beachtet, dass sie linksbündig und nicht rechtsbündig gerendert wird). Warum ist das passiert? Welchen Aufruf sollte ich machen, um die Zelle 'Betrag' in der Zusammenfassungszeile zu aktualisieren?

Drittes Problem - wenn ein Benutzer Änderungen an den 'Betrag'-Zellen vornimmt (Doppelklick, um den Betrag zu ändern), tritt das onChange-Ereignis auf, wodurch eine neue Summe berechnet wird. Die vom Benutzer vorgenommenen Änderungen sind in den Rasterdatensätzen nicht verfügbar. Die Änderungen werden an einem anderen Ort gespeichert. Die neu berechnete Summe entspricht also nicht den Zahlen, die der Benutzer im Raster sieht. Die neuen Werte sind in den Datensätzen (records [i] .amount) erst nach dem Speichern der Aktualisierungen verfügbar. Aber ich muss auf die im Raster angezeigten Beträge zugreifen, bevor die Änderungen gespeichert werden. Wie greife ich auf die geänderten Werte zu?

Answer 1

einen vorhandenen Datensatz zu ändern, müssen Sie die set Methode verwenden - mit get Sie tun nicht einen Verweis erhalten, aber eine Kopie!

Über Ihr erstes Problem: Sie weisen einen Render-Callback zu, nachdem das Raster bereits gerendert wurde. Sie müssen den Rückruf im Konstruktor zuweisen:

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

Ihre zweite Frage sollte nicht länger ein Problem sein, wenn Sie set statt get verwenden.

Über Ihr drittes Problem: Bis Sie die Änderungen speichern, werden die Änderungen in record.w2ui.changes gespeichert - also entweder grid.save() anrufen oder den Betrag aus den Änderungen beziehen, nicht aus dem ursprünglichen Datensatz.

Aktualisiert Geige:

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