w2ui 그리드 요약 셀을 어떻게 업데이트합니까?

Question

하나의 열에 모든 숫자의 합계를 표시해야하는 표가 있습니다. 그리드에서 숫자를 편집 할 수 있으며 숫자가 바뀌면 (Save 전에) 합계를 업데이트해야합니다. 여러 문제가 있습니다. 작동중인 프로그램을 살펴보고 싶다면 관련 코드를 아래에 표시하고 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'를 추가하고 결과를 요약 레코드의 amount 필드에 저장합니다. 금액이 변경되면 refreshCell을 호출합니다. 그러나 격자의 초기 표시가 발생할 때 핸들러 중 아무 것도 호출되지 않습니다. 따라서 요약 레코드에는 0이 표시됩니다. 그리드가 처음 표시 될 때 요약 금액을 업데이트하기 위해 어떤 호출을해야합니까?

두 번째 문제 - updateTotal()은 잘못된 셀에 결과를 표시합니다. 버튼을 클릭하여 updateTotal()을 실행합니다. 3000의 합계는 초기 상태에있는 테이블에 대해 정확합니다. 요약 레코드 ('s-1')가 'amount'필드의 올바른 값으로 업데이트되고 refreshCell ('s-1', 'amount')가 호출되는 innerHTML을 업데이트하는 행에서 확인할 수 있습니다. . 그러나 그리드에서, recid 1에 대한 'amount'셀은 3000을 나타내도록 업데이트됩니다 (그리고 오른쪽 정렬이 아닌 왼쪽 정렬로 렌더링 됨). 왜 이런 일이 일어 났습니까? 요약 행의 '금액'셀을 업데이트하려면 무엇을해야합니까?

세 번째 문제 - 사용자가 '금액'셀을 변경 (두 번 클릭하여 금액 변경)하면 onChange 이벤트가 발생하여 새 총계가 계산됩니다. 그러나 사용자가 변경 한 사항은 그리드 레코드에서 사용할 수 없습니다. 변경 사항은 다른 위치에 저장됩니다. 따라서 새로 계산 된 총계는 사용자가 그리드에서 보는 숫자와 일치하지 않습니다. 업데이트가 저장 될 때까지 새 값을 레코드 (records [i] .amount)에서 사용할 수 없습니다. 그러나 변경 사항이 저장되기 전에 그리드에 표시된 금액에 액세스해야합니다. 변경된 값에 어떻게 액세스합니까? 대한 참조를 가져 get 당신은 하지을하지만, 사본 -

Answer 1

기존 레코드를 수정하려면 set 방법을 사용할 필요가!

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

첫 번째 문제 : 그리드가 이미 렌더링 된 후에 렌더링 콜백을 할당하려고합니다. 당신은 생성자에서 콜백을 할당해야합니다 : 당신이 얻는 대신 set를 사용할 때

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

두 번째 문제는 더 이상 문제가 없어야합니다.

세 번째 문제 : 변경 사항을 저장할 때까지 변경 사항이 record.w2ui.changes에 저장되므로 grid.save()으로 전화하거나 원래 레코드가 아닌 변경 사항에서 금액을 가져 오십시오.

업데이트 바이올린 :

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