通过输入 AgGrid React 添加行

Question

有人知道如何通过输入向 AgGrid 添加多行吗？

我有一个弹出式输入框，我可以在其中输入要添加的行数。我已经使用 console.log 从输入中获取数字。

form.js

import * as React from 'react';
import Button from '@mui/material/Button';
import TextField from '@mui/material/TextField';
import Dialog from '@mui/material/Dialog';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
import DialogContentText from '@mui/material/DialogContentText';
import DialogTitle from '@mui/material/DialogTitle';

export default function FormDialog() {
  const [open, setOpen] = React.useState(false);
  const [Number, setNumber] = useState("");

  const handleClickOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setNumber(event.target.value);
    console.log(Number)
    setOpen(false);
  };

  return (
    <div>
      <Button variant="outlined" onClick={handleClickOpen}>
        Open form dialog
      </Button>
      <Dialog open={open} onClose={handleClose}>
        <DialogTitle>Subscribe</DialogTitle>
        <DialogContent>
          <DialogContentText>
            Number:
          </DialogContentText>
          <TextField
            autoFocus
            margin="dense"
            id="num"
            label="Number"
            fullWidth
            variant="standard"
            onChange={handleChange}
            value={Number}
          />
        </DialogContent>
        <DialogActions>
          <Button onClick={handleClose}>Cancel</Button>
          <Button onClick={handleClose}>Add</Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}

然后我有我的 aggrid.js，我在其中导入了 FormDialog 函数。我调用表单函数。目前具有添加新行的功能

onAddRow = () => {
      
    this.gridApi.updateRowData({
      add: [{FirstName: "", LastName:"", Town:""}]
      });
  }

我不确定如何根据我在表单中输入的内容添加所需的行

Answer 1

您可以使用：

GridApi.applyTransaction({ add: [...] })

在 AgGrid 中添加多行，其中数组是行数据。下面是一个例子：

function FormDialog({ onAdd }) {
  const [open, setOpen] = React.useState(false);
  const [number, setNumber] = React.useState(null);
  const handleClose = () => setOpen(false);
  const handleAdd = () => {
    onAdd(number);
    handleClose();
  };

  return (
    <div>
      <Button variant="outlined" onClick={() => setOpen(true)}>
        Open form dialog
      </Button>
      <Dialog open={open} onClose={handleClose}>
        <DialogTitle>Subscribe</DialogTitle>
        <DialogContent>
          <DialogContentText>Number:</DialogContentText>
          <TextField
            onChange={(e) => setNumber(e.target.value)}
            value={number}
          />
        </DialogContent>
        <DialogActions>
          <Button onClick={handleClose}>Cancel</Button>
          <Button onClick={handleAdd}>Add</Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}

<FormDialog
  onAdd={(n) => {
    gridApi.applyTransaction({
      add: [...Array(Number(n)).keys()].map((i) => ({
        firstName: 'first name',
        lastName: 'last name',
        town: 'town',
      }))
    });
  }}
/>

参考

https://www.ag-grid.com/javascript-data-grid/data-update-transactions/#transaction-update-api

通过输入 AgGrid React 添加行

Add rows via input AgGrid React

reactjs

ag-grid

ag-grid-react

参考