Ng 그리드 열 합계입니다. 내가 제대로 했니?

Question

은 내가 dispay하는 NG-GRID를 구성 JSON

[{"TankName":"Tnk1","UseFuel":"100","UnusedFuel":"200"}, 
{"TankName":"Tnk2","UseFuel":"150","UnusedFuel":"600"}, 
{"TankName":"TOTAL","UseFuel":"0","UnusedFuel":"0"}] 

을 다음과 같이 구축 된 NG 그리드가 있습니다. 그리드 아래

는 그리드 otions 내가 열 합계 (아랫 줄)을 조롱에 사용자 편집 뭔가를 넣을

columnDefs: [ 
       { field: 'TankName', displayName: 'Fuel Tank', enableCellEdit: false,}, 
       { field: 'UseFuel', displayName: 'Use Fuel', editableCellTemplate: '<input ng-input="COL_FIELD" ng-model="COL_FIELD"/>' }, 
       { field: 'UnusedFuel', displayName: 'Unused Fuel', editableCellTemplate: '<input ng-input="COL_FIELD" ng-model="COL_FIELD"/>' } 

      ] 

있는 그대로 아래에 표시됩니다. "TOTAL"행에 표시해야합니다. 나는 아래

$scope.$on('ngGridEventEndCellEdit', function (data) { 
      var totalRow; 
      angular.forEach(a.gridOptions_all.ngGrid.data, function (row) {     
       if (row.TankName.toString().toUpperCase() != 'TOTAL') { 
        totalUseFuel += Number(row.UseFuel); 
        totalUnUseFuel += Number(row.UnusedFuel); 
       } 
       else {totalRow = row;} 
      }); 
      totalRow.UseFuel= totalUseFuel ; 
      totalRow.UnusedFuel= totalUnUseFuel ; 
     }); 

여기

plunker 컨트롤러

내 코드는 나의 필요를

을 양복지하지 이후 FooterTemplate 영역을 사용할 수 없습니다.

columnDefs: [{ 
    field: 'TankName', 
    displayName: 'Tank', 
    enableCellEdit: false, 
    cellEditableCondition: 'newFunc(row);' 
    }, { 
    field: 'UseFuel', 
    displayName: 'Ballast Fuel', 
    editableCellTemplate: '<input ng-input="COL_FIELD" ng-model="COL_FIELD"/>' 
    }, { 
    field: 'UnusedFuel', 
    displayName: 'Trapped Fuel', 
    cellEditableCondition: 'row.rowIndex != 2', 
    editableCellTemplate: '<input ng-input="COL_FIELD" ng-model="COL_FIELD"/>' 
    }, { 
    displayName: 'Total', 
    cellTemplate: '<div>{{getTotal(row.entity.UseFuel,row.entity.UnusedFuel)}}<div>' 
    } 

] 
}; 

$scope.getTotal = function(uf, uuf) { 
    return Number(uf) + Number(uuf); 
} 

참고 cellTemplate과 getTotal 기능 : 일부는 더 나은 당신이 질문에 배치 그림에 대해서는 옵션

Answer 1

이 같은 그것을 해결할가 있는지 말할 수 있습니다.

이 Plunker을 보면 사용자가 입력하는 동안이 업데이트를 볼 수 있습니다.