如何在反应中实现 AG 网格行内的按钮

Posted 2023-02-22

【中文标题】如何在反应中实现 AG 网格行内的按钮

【英文标题】：How to implement buttons inside a AG grid rows in react

【发布时间】：2021-06-23 02:36:07

【问题描述】：

我想实现一个带有名称、类型列的 AG 网格表。我想在表格中再添加一列“编辑”，并允许用户编辑和删除表格中的行。它看起来像这样：

我从 redux 存储中获取数据，这是我在行内实现数据的方式。

const members = useSelector(state => state.members) // Get current members 
const data = 
  columnDefs : [
headerName: 'Name', field: 'name', 
headerName: 'Type', field: 'type',
headerName: 'Edit', field: 'edit'
],
  rowData: []


members.map((member) => 
  data.rowData.push(
    name:member.name,
    type:member.type,
    edit: '' // ?? What comes here so I can delete & edit by rows easily with buttons ?? 
  )
)

return ( 
    <div> 
    <div className="ag-theme-material">
        <AgGridReact columnDefs=data.columnDefs rowData=data.rowData />            
    </div>
</div>

)

我是 react-redux 的新手，最好的实现是什么？我可以使用上面的 map 函数在表中获取数据吗？任何建议将不胜感激。

【参考方案1】：

方法 1：使用编辑对话框

您可以让编辑按钮打开一个编辑对话框，并在用户关闭后将新更改发送到商店：

为按钮和对话框创建自定义单元格渲染器。在本例中，我将使用 Material-UI 的 Dialog。但是，您可以选择所需的任何对话框库。

function ButtonActionRenderer(props) 
  // props is ICellRenererParams. See:
  // https://www.ag-grid.com/react-grid/component-cell-renderer/#cell-renderer-component-2
  const  id  = props.data;
  const [open, setOpen] = useState(false);
  const [memberPayload, setMemberPayload] = useState(props.data);
  const dispatch = useDispatch();
  const onClose = () => setOpen(false);
  const onSave = () => 
    dispatch(memberAction.update(id, memberPayload);
    onClose();
  

  return (
    <>
      <button onClick=() => setOpen(true)>Edit</button>
      <Dialog open=open onClose=() => setOpen(false)>
        <DialogContent>
          <EditingForm value=memberPayload onChange=setMemberPayload />
        </DialogContent>
        <DialogActions>
          <Button onClick=onSave color="primary">
            Close
          </Button>
          <Button onClick=onClose color="primary">
            Save
          </Button>
        </DialogActions>
      </Dialog>
    </>
  );

在 ag-grid 中注册该自定义单元格渲染器

<AgGridReact
  columnDefs=[...columnDefs,
  
    headerName: "Action",
    field: "action",
    width: 100,
    cellRenderer: "ButtonActionRenderer"
  ]
  frameworkComponents=
    ButtonActionRenderer,
  
/>

方法 2：使用 Ag-Grid Cell Editor

使您的表格单元格可编辑，并在每次输入更改时将新更改发送到商店。

const MyEditor = forwardRef((props, ref) => 
    // props is ICellEditorParams. See:
    // https://www.ag-grid.com/react-grid/component-cell-editor/#cell-editor-component-1
    const field = props.colDef.field;
    const member = useSelector(state => state.members.id);
    const value = member[field];
    const onChange = (e) => dispatch(memberAction.updateField(field, e.target.value));

    return (
      <input
        ref=refInput
        value=value
        onChange=onChange
        style=width: "100%"
      />
    );
);

在 ag-grid 中注册自定义单元格编辑器

<AgGridReact
  columnDefs=[...columnDefs,
  
    headerName: "Name",
    field: "name",
    width: 100,
    cellEditor: "MyEditor"
  ]
  frameworkComponents=
    MyEditor,
  
/>

参考文献

Cell renderer Simple cell editor