angular-ui ng-grid 如何使聚合行成为可编辑行答案

【问题标题】：angular-ui ng-grid How to make the aggregate row be an editable rowangular-ui ng-grid 如何使聚合行成为可编辑行
【发布时间】：2016-08-15 15:45:12
【问题描述】：

我认为我想要实现的是在ng-grid 中添加一个tree-like。我没有找到这样的实现，但我想知道我是否可以使用分组机制

我需要让组标题能够以与其下面的行相同的方式进行编辑（见上图），具有完全相同的可编辑单元格，充当主行。从标题组更新一个单元格时，应更新该组下的所有单元格。

来自 ng-grid 文档http://angular-ui.github.io/ng-grid/：

聚合模板的默认值：

    <div ng-click="row.toggleExpand()" ng-style="{'left': row.offsetleft}" class="ngAggregate">
        <span class="ngAggregateText">{{row.label CUSTOM_FILTERS}} ({{row.totalChildren()}} {{AggItemsLabel}})</span>
        <div class="{{row.aggClass()}}"></div>
    </div>

是否可以使用此选项来呈现我描述的聚合行？

【问题讨论】：

标签： angularjs angular-ui ng-grid

【解决方案1】：

以下答案/评论与树状结构有关，与使聚合行可编辑无关...

如果您正在 ng-grid 中寻找树状结构，那么您可以通过组合使用 ng-if、ng-click 和 API(s) 来更新 ng-grid data 选项单击特定排。这是一个示例plnkr。

单击父行时，将调用切换函数以在ng-grid data 中添加/删除子行。（完整详情请参考我的plunker代码）

$scope.toggleDisplay = function(iType) {
  $scope.displayItemDetails[iType] = $scope.displayItemDetails[iType] ? 0 : 1;
  $scope.selItems = $scope.updateTable();
};


$scope.updateTable = function() {
  var selItems = [];
  for (var i in $scope.allItems) {
    var iType = $scope.allItems[i]["Type"];

    if (angular.isUndefined($scope.displayItemDetails[iType])) {
      $scope.displayItemDetails[iType] = 0;
    }

    if (1 == $scope.displayItemDetails[iType]) {
      $scope.allItems[i]["Summary"] = '-';
    } else {
      $scope.allItems[i]["Summary"] = '+';
    }
    selItems.push($scope.allItems[i]);

    if ($scope.displayItemDetails[iType]) {
      for (var j in $scope.allItems[i]["Details"]) {
        $scope.allItems[i]["Details"][j]["Summary"] = "";
        selItems.push($scope.allItems[i]["Details"][j]);
      }
    }

  }
  return selItems;
};

$scope.gridOptions = {
  data: 'selItems',
  columnDefs: [{
    field: 'Summary',
    displayName: '',
    cellTemplate: summaryCellTemplate,
    width: 30
  }, {
    field: 'Name',
    displayName: 'Name',
  }, {
    field: 'Type',
    displayName: 'Type',
  }, {
    field: 'Cost',
    displayName: 'Cost',
  }, {
    field: 'Quantity',
    displayName: 'Quantity',
  }],
  enableCellSelection: false,
  enableColumnResize: true
};

【讨论】：