代码之家 › 专栏 › 技术社区 › CodeMonkey

在网格的特定行上迭代

ag-grid-react ag-grid reactjs

0

CodeMonkey · 技术社区 · 4 年前

我有一个 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} />
    )
}

0 回复 | 直到 4 年前

1

0

S_learner 4 年前

正如ag Grid文档中提到的,ag Grid将一些默认道具传递给每个单元渲染器,这些道具的格式为 IcellRenderParams ,

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

所以,有一个属性叫做数据它指向指向单元格渲染器所在索引的行数据(在本例中为单击的行数据)。

所以你的单元渲染器可以直接使用这个道具作为 道具。数据 ,

/* 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}/>
    )
}