寻求适配Angular 1.x的Ag-Grid ~2.3.2文档以使用免费Row Grouping功能

Hey there! Let's walk through how to implement free Row Grouping with Ag-Grid ~2.3.2 in Angular 1.x. Since this is an older version of Ag-Grid, the API is a bit different from modern releases, but it's totally achievable without needing the enterprise license. Here's a step-by-step breakdown:

1. Set Up the Base Configuration #

First, make sure you've properly injected Ag-Grid into your Angular 1.x module:

angular.module('yourAngularApp', ['agGrid']);

Then add the grid container to your template:

<div ag-grid="gridOptions" class="ag-fresh"></div>

The ag-fresh class applies the default styling—don't skip this, as it ensures grouping UI elements (like expand/collapse icons) render correctly.

2. Enable Row Grouping via Column Definitions #

The core of row grouping in this version lies in marking columns as grouping keys using the rowGroup: true property in your column definitions. Here's a concrete example:

$scope.gridOptions = {
  columnDefs: [
    // Mark this column as the grouping key
    { headerName: 'Country', field: 'country', rowGroup: true },
    { headerName: 'City', field: 'city' },
    // Add an aggregation function for numeric columns (free feature!)
    { headerName: 'Population', field: 'population', aggFunc: 'sum' }
  ],
  rowData: [
    { country: 'USA', city: 'New York', population: 8336817 },
    { country: 'USA', city: 'Los Angeles', population: 3971883 },
    { country: 'Canada', city: 'Toronto', population: 2731571 }
  ],
  // Optional: Configure grouping behavior
  groupDefaultExpanded: 1, // Expand first level of groups by default
  groupHeaderHeight: 30, // Set height for group headers
  suppressAggFuncInHeader: true, // Hide "sum()" text from the aggregated column header
  // Enable standard grid features to complement grouping
  enableColResize: true,
  enableSorting: true,
  enableFilter: true
};

When you load the grid, it will automatically group rows by the country column and calculate the total population for each group.

3. Customize Group Headers (Optional) #

If you want to tweak the appearance of group headers, use the groupHeaderTemplate property in your grouped column definition. For example:

{ 
  headerName: 'Country', 
  field: 'country', 
  rowGroup: true,
  groupHeaderTemplate: '<div class="ag-group-header-cell">Region: {{groupKey}} ({{childCount}} cities)</div>'
}

This template uses groupKey (the value of the grouping column) and childCount (number of rows in the group) to create a more informative header.

4. Troubleshooting Common Issues #

• Grouping not working? Double-check that rowGroup: true is set on the correct column, and your rowData has valid values for that column.
• No expand/collapse icons? Ensure you've included the Ag-Grid CSS and are using a valid theme class like ag-fresh.
• Aggregation not calculating? Confirm the aggFunc is set on a numeric column, and the field values are numbers (not strings).

内容的提问来源于stack exchange，提问作者Florent