Ng Grid列总计。我做得对吗?

时间:2014-09-17 09:55:17

标签: angularjs ng-grid

我有一个使用以下JSON

构建的ng-grid
[{"TankName":"Tnk1","UseFuel":"100","UnusedFuel":"200"},
{"TankName":"Tnk2","UseFuel":"150","UnusedFuel":"600"},
{"TankName":"TOTAL","UseFuel":"0","UnusedFuel":"0"}]

我已配置NG-GRID进行调度。网格将显示如下 enter image description here

下面是Grid-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"/>' }

            ]

当用户在网格上编辑内容时,我想放置列总计(底行)。我必须在&#34; TOTAL&#34;行。我不能使用FooterTemplate,因为它不符合我的需要

以下是我在控制器中的代码

$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。有人可以说是否有更好的选择

1 个答案:

答案 0 :(得分:1)

关于你在问题中提出的图片,我会这样解决:

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);
}

请注意cellTemplategetTotal功能。

在您输入时查看此Plunker以查看此更新。

相关问题