Angularjs UI 行内每行的网格总计

Question

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

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

如您在上图中所见，我要查找的总计仅与整数值相关，与初始字符串无关。
此外，带有 X 的按钮在单击时应删除该行。这些行动态地包含在网格中。

我已经完成了 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)"

Angularjs UI 行内每行的网格总计

Angularjs UI Grid Totals per Row inside the row

angularjs

angular-ui-grid