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

Question

我想实现一个带有名称、类型列的 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 的新手，最好的实现是什么？我可以使用上面的映射函数获取表内的数据吗？任何建议，将不胜感激。

Answer 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单元格编辑器

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

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,
  }}
/>

参考

• 单元格渲染器
• 简单的单元格编辑器