迭代反应农业网格的特定行

Question

我得到了一个 ag-grid，在专用列中呈现了一个按钮（这意味着每一行在该列下方的一侧都有一个按钮）。我是这样做的：

const columnDefinition = [
                          {headerName: '', cellRenderer: 'editButton'},
                          {headerName: "Key", field: "Key"},
                          {headerName: "Value", field: "Value"}];

const overlayParams = {
  frameworkComponents: {
                        editButton: EditMagnifierButton, //EditMagnifierButton is a react functional component which renders a button
                       }
return (
 <Ag-Grid-React
     rowData={myRowData}
     columnDefs={columnDefinition} 
     {...overlayParams} />
);

我想知道如何遍历用户单击按钮的行并获取该行每一列中的所有值，以便我可以将它们作为道具传递给另一个组件。

EditMagnifierButton:

const EditMagnifier = (props) =>
{
    return (
        <IconButton iconSvg={search} />
    )
}

Answer 1

如 ag-Grid 文档中所述，ag-Grid 将一些默认道具传递给每个单元格渲染器，这些道具的格式为 ICellRendererParams、

interface ICellRendererParams {
    value: any, // value to be rendered
    valueFormatted: any, // value to be rendered formatted
    getValue: () => any, // convenience function to get most recent up to date value
    setValue: (value: any) => void, // convenience to set the value
    formatValue: (value: any) => any, // convenience to format a value using the column's formatter
    data: any, // the row's data
    node: RowNode, // row node
    colDef: ColDef, // the cell's column definition
    column: Column, // the cell's column
    rowIndex: number, // the current index of the row (this changes after filter and sort)
    api: GridApi, // the grid API
    eGridCell: HTMLElement, // the grid's cell, a DOM div element
    eParentOfValue: HTMLElement, // the parent DOM item for the cell renderer, same as eGridCell unless using checkbox selection
    columnApi: ColumnApi, // grid column API
    context: any, // the grid's context
    refreshCell: () => void // convenience function to refresh the cell
}

详细信息可以在下面找到， https://www.ag-grid.com/javascript-grid-cell-rendering-components/#cell-renderer-component

因此，有一个属性称为 data，它指向 rowData，指向单元格渲染器所在的索引（在本例中，单击一个).

因此您的单元格渲染器可以直接使用此道具作为 props.data,

/* Here the props will point to ICellRendererParams */
const EditMagnifier = (props) =>
{

    const printRowData = (event) => {
      /* This will give you the complete row data for the clicked row*/
      console.log(props.data);
    }
    
    return (
        <IconButton iconSvg={search} onClick={printRowData}/>
    )
}

迭代反应农业网格的特定行

Iterating over a specific row of a react ag-grid

reactjs

ag-grid

ag-grid-react