Question

我正在使用ag-grid来显示具有Row Grouping的表。我分组的列是不可见的，因为它的值没有意义。

例如，我将具有以下（完全折叠）表：

---------------------------------
|   H1       H2        H3        |
----------------------------------
| > groupId1 (1)                 |
----------------------------------
| > groupId2 (5)                 |
----------------------------------

如您所见，分组是通过用户 un 友好ID完成的，该ID根本没有反映在“列定义”中。我想将groupId1 / groupId2更改为用户友好的文本，该文本根据组行的内容动态分配。

我正在使用React。

我以ag-Grids示例作为起点，以下示例体现了我面临的问题：（例如：https://plnkr.co/edit/VM59gScPD55PhX4y4JBj?p=preview）

具有行分组
分组由不可见的列（国家/地区）
我想将国家/地区名称动态更改为从内部行的值派生的另一个值。

感谢您的宝贵时间。：）

Answer 1

您可以传递有关组单元格渲染器的其他参数，并像这样自定义它-

colDef = {
    // set the cell renderer to 'group'
    cellRenderer:'agGroupCellRenderer',
    // provide extra params to the cellRenderer
    cellRendererParams: {
        innerRenderer: myInnerRenderer, // provide an inner renderer
    }
    ...
};

然后，您应该能够使用myInnerRenderer实现基于自定义逻辑显示任何文本。

这是来自ag-grid docs的示例。检查 Group Renderer C 实施

Answer 2

最后一位同事帮助了我，他的解决方法是：

valueFormatter: ({ value, data }) => 'something ' + value

在我的组的colDef中，将显示为标题的值发送到“数据”内部。

他说cellRenderer对于像这样的简单任务来说是一个过大的杀伤力。

Answer 3

您还可以使用此简单的道具来重命名ag-grid的rowGroup标头 autoGroupColumnDef

<AgGridReact 
  columnDefs={columnDefs} 
  rowData={rowData}
  autoGroupColumnDef={{
    headerName: 'Name'
  }}
/>

ag-grid修改行组的标题名称

3 个答案: