通过输入AgGrid React添加行
通过输入AgGrid React添加行
提问于 2021-10-22 12:14:03
有人知道如何通过输入向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:""}]
});
}我不知道如何根据我在表单中输入的内容添加所需的行
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-10-22 12:47:39
您可以使用：
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',
}))
});
}}
/>
参考文献
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69676723
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号