angularjs - 如何在 ng-grid 分组中有一个复选框

Question

是否可以在 ng-grid 分组标题中有一个复选框？单击该分组复选框时，应选中该特定组下行的所有复选框。其他组行应保持未选中状态。

现在，当我有如下所示的 gridOptions 时，我看到所有行和表头中的复选框。当拖动列标题以将其用于分组时，分组的行标题没有复选框。有人可以帮忙吗？

$scope.gridOptions = {
    data: 'myData',
    showGroupPanel: true,
    showSelectionCheckbox: true,
    jqueryUITheme: true,
    enableCellSelection: true,
    enableRowSelection: true,
    enableCellEdit: false,
    pinSelectionCheckbox: false,
    selectWithCheckboxOnly: true
};

Answer 1

为了实现它，您必须首先覆盖默认的 aggregateTemplate :

$scope.gridOptions = {
  data: 'myData',
  showGroupPanel: true,
  showSelectionCheckbox: true,
  jqueryUITheme: true,
  enableRowSelection: true,
  aggregateTemplate: "<div ng-init=\"initAggregateGroup(row)\" ng-style=\"rowStyle(row)\" style=\"top: 0px; height: 48px; left: 0px; cursor:pointer\" class=\"ngAggregate\">" +
"    <span class=\"ngAggregateText\" ng-click=\"expandGroupChilds($event, row)\">{{row.label CUSTOM_FILTERS}} ({{row.totalChildren()}} {{AggItemsLabel}})</span>" +
"<input class=\"ngSelectionHeader\" type=\"checkbox\" ng-show=\"multiSelect\" ng-checked=\"row.status.isChecked\" ng-model=\"row.status.isChecked\" ng-change=\"toggleGroupSelectedChilds(row)\" /></div>"  
};

然后你可以在你的 Controller 中添加这些功能:

$scope.expandAll = function($event){
   $scope.isAllCollapsed = !$scope.isAllCollapsed;
   _.each($scope.ngGridOptions.ngGrid.rowFactory.aggCache, function(row){
     row.toggleExpand();
   });
};

$scope.initAggregateGroup = function(group){
   group.status = {
      isChecked: false
   };
};

$scope.toggleGroupSelectedChilds = function(group){
  _.each(group.children, function(entry){
      $scope.ngGridOptions.selectItem(entry.rowIndex, group.status.isChecked);
  });
};

$scope.expandGroupChilds = function($event, group){
   $event.stopPropagation();
   $event.preventDefault();

   group.toggleExpand();
};