Angularjs UI Grid Totals每行内部行

Question

{{HelloWorld}}

我正在尝试访问angular-ui-grid中同一行中其他列的值。我有两个相关的问题。

1. 如何添加同一行中多个列的值以获得总计？
2. 如何使用行索引将其作为参数传递并删除当前行？



正如您在上图所示，我正在寻找的总计只与整数值有关，而与初始字符串无关。
带有X的Button也应该在单击时删除该行。行动态地包含在网格中。

我已经浏览了UI Grid Tutorial，但示例并未说明如何完成我的任何一个问题。

我的页脚工作正常。它配置为在整个行集中给出总数但是按列：



这是我目前为止发现的一些代码：

var removeTemplate = '<button type="button" class="grid-remove btn btn-default btn-sm"><span class="glyphicon glyphicon-remove" aria-hidden="true" ng-click="removeRow($event, row.entity)"></span></button>';

$scope.gridAccountableHours = {
    enableCellEditOnFocus: true,
    showColumnFooter: true
};

$scope.gridAccountableHours.columnDefs = [
  { name: "contractCode", displayName: ""},
  { name: "hours1", displayName: "1", type: "number" },
  { name: "hours2", displayName: "2", type: "number", aggregationType: uiGridConstants.aggregationTypes.sum },
  { name: "hours3", displayName: "3", type: "number", aggregationType: uiGridConstants.aggregationTypes.sum },
  { name: "hours4", displayName: "4", type: "number", aggregationType: uiGridConstants.aggregationTypes.sum },
  { name: "hours5", displayName: "5", type: "number", aggregationType: uiGridConstants.aggregationTypes.sum },
  { name: "hours6", displayName: "6", type: "number", aggregationType: uiGridConstants.aggregationTypes.sum },
  { name: "hours7", displayName: "7", type: "number", aggregationType: uiGridConstants.aggregationTypes.sum },
  { name: "hours8", displayName: "8", type: "number", aggregationType: uiGridConstants.aggregationTypes.sum },
  { name: "hours9", displayName: "9", type: "number", aggregationType: uiGridConstants.aggregationTypes.sum },
  { name: "hours10", displayName: "10", type: "number", aggregationType: uiGridConstants.aggregationTypes.sum },
  { name: "hours11", displayName: "11", type: "number", aggregationType: uiGridConstants.aggregationTypes.sum },
  { name: "hours12", displayName: "12", type: "number", aggregationType: uiGridConstants.aggregationTypes.sum },
  { name: "hours13", displayName: "13", type: "number", aggregationType: uiGridConstants.aggregationTypes.sum },
  { name: "hours14", displayName: "14", type: "number", aggregationType: uiGridConstants.aggregationTypes.sum },
  { name: "hours15", displayName: "15", type: "number", aggregationType: uiGridConstants.aggregationTypes.sum },
  { name: "total", displayName: "Total" },
  { name: "remove", displayName: "", cellTemplate: removeTemplate }
];

$scope.removeRow = function ($event, entity) {
    $event.stopPropagation();
    $scope.gridAccountableHours.data.splice($scope.gridAccountableHours.data.indexOf(entity), 1);
};

感谢您的时间。

Answer 1

您可以使用gridRow上的函数对网格进行总计。

$scope.gridAccountableHours.forEach(function(rowEntity) {
  rowEntity.total = function() {
    var total = 0;
    for( var 1 = 1; i++; i<=15 ){
      total += this['hours'+i];
    }
  };
});

您的总列def应自动绑定到此总函数。请参阅http://ui-grid.info/docs/#/tutorial/106_binding

对于删除按钮，您错过了appScope，请参阅http://ui-grid.info/docs/#/tutorial/305_appScope

您的模板ng-click应为：

ng-click="grid.appScope.removeRow($event, row.entity)"