获取Ag Grid中单元格内的整个行数据答案

【问题标题】：Get the entire row's data inside a cell in AgGrid获取Ag Grid中单元格内的整个行数据
【发布时间】：2021-09-22 15:44:29
【问题描述】：

我正在使用AgGridReact，但这是一个关于如何使用 AgGrid 在该行的单元格中获取整行数据的一般问题。

我正在为某个单元格（其字段为id）使用自定义单元格渲染器，我需要在其中获取整行的数据，而不仅仅是id 字段的数据。

这是网格的定义方式：

<AgGridReact
    rowData={users}
    frameworkComponents={{
        idRenderer: IdRenderer,
    }}
>
    <AgGridColumn field="id" cellRenderer="idRenderer"></AgGridColumn>
    <AgGridColumn field="name"></AgGridColumn>
    <AgGridColumn field="phone"></AgGridColumn>
    <AgGridColumn field="email"></AgGridColumn>
</AgGridReact>

这是我需要获取行数据的IdRender 组件（用于自定义id 字段单元格的外观）：

import { useEffect } from 'react';

function IdRenderer(props) {
    // the following currently stores the cell's value in `rowData`
    const rowData = props.valueFormatted ? props.valueFormatted : props.value;

    useEffect(() => {
        console.log(rowData);  // get the entire row's data here instead of just this cell's value
    }, [])

    return (
        <>
            {/* some components */}
        </>
    );
}

export default IdRenderer;

我无法从文档中找出我应该向网格或单元格渲染器添加什么才能在 id 字段的单元格中获取整行的数据（我将在其中发布数据到 API 上单击按钮）。

【问题讨论】：

标签： ag-grid ag-grid-react

【解决方案1】：

在翻阅文档很长时间后，我终于找到了实现这一目标的方法：使用valueGetter。我决定发布此问答，以帮助其他人弄清楚如何实现同样的目标。

只需为行的数据定义以下值获取器：

const rowDataGetter = function (params) {
    return params.data;
};

并通过设置valueGetter 属性在AgGridColumn 上使用它：

<AgGridColumn field="id" cellRenderer="idRenderer" valueGetter={rowDataGetter}></AgGridColumn>

现在IdRenderer 中的rowData 将包含整行数据而不是单元格值。

【讨论】：