在 Ag Grid 中巧用 `colId` 轻松设置固定行数据

在 Ag Grid 中使用 colId 设置固定底部行数据

简介

固定行功能是 Ag Grid 中一项强大的功能，可让您锁定特定行，即使在滚动网格时，这些行也能保持可见。这在显示汇总行或其他重要信息时非常有用。

然而，在使用点表示法（例如 field: "supplier.number"）从嵌套数据中获取值时，会出现一个常见问题。setPinnedBottomRowData 方法不支持点表示法，这可能会导致固定底部行中显示为空白。

解决方案：使用 colId

解决此问题的解决方案是使用 colId 选项。colId 允许您指定一个唯一的标识符，该标识符与 field 选项中指定的字段名称相关联。通过使用 colId，您可以避免使用点表示法，如下所示：

{
  headerName: "number",
  colId: "supplierNumber",
  field: "supplier.number"
},

代码示例

以下代码示例演示了如何使用 colId 设置固定底部行数据：

const columnDefs = [
  {
    headerName: 'Information',
    children: [
      {
        headerName: 'Description',
        colId: 'supplierDesc',
        field: 'supplier.desc',
      },
      {
        headerName: 'Number',
        colId: 'supplierNumber',
        field: 'supplier.number',
      },
    ],
  },
  {
    headerName: 'Header2',
    children: [
      {
        headerName: 'Supplier Budget',
        colId: 'supplierBudget',
        field: 'year2024.budget',
        cellRenderer: (params) => this.currencyFormatter(params.value, '€'),
      },
    ],
  },
];

// 计算总和并将其设置到固定底部行
function createData(prefix, list) {
  let calcTotalCols = ['supplierDesc', 'supplierNumber', 'supplierBudget'];
  let total = [{}];
  
  // 初始化所有总计列为 0
  calcTotalCols.forEach((col) => {
    total[0][col] = 0;
  });

  // 计算所有总计列
  calcTotalCols.forEach((col) => {
    list.forEach((line) => {
      total[0][col] += line[col];
    });
  });
  
  let result = [];
  result.push({
    supplierDesc: prefix + total[0]['supplierDesc'],
    supplierNumber: prefix + total[0]['supplierNumber'],
    supplierBudget: prefix + total[0]['supplierBudget'],
  });

  gridApi.setPinnedBottomRowData(result);
}

结论

通过使用 colId 选项，您可以轻松地在 Ag Grid 中使用点表示法设置固定底部行数据，从而避免了修改 JSON 数据源的需要。这使得创建复杂的网格布局变得更加容易，这些布局可以清晰地显示汇总数据和其他重要信息。

常见问题解答

1. 我可以在固定底部行中使用任何类型的字段吗？
   是的，只要您使用 colId，就可以使用任何类型的字段，包括复杂的对象或数组。

2. 我可以在固定底部行中设置多个行吗？
   是的，您可以使用 pinnedBottomRowData 选项设置一个行数组。

3. 固定底部行是否支持行分组？
   是的，固定底部行支持行分组，但您需要手动设置 pivotMode 和 rowGroup 属性。

4. 我可以使用 colId 在固定顶部行中设置数据吗？
   是的，您可以使用 pinnedTopRowData 选项和 colId 在固定顶部行中设置数据。

5. 我可以在固定行中使用自定义单元格渲染器吗？
   是的，您可以使用 cellRenderer 选项在固定行中使用自定义单元格渲染器。