以下是一个示例,展示了如何在Ag-Grid中编辑数据并将其发送到服务器:
import { AgGridReact } from 'ag-grid-react';
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';
const MyGridComponent = () => {
const [rowData, setRowData] = useState([]);
const columnDefs = [
{ headerName: 'Name', field: 'name', editable: true },
{ headerName: 'Age', field: 'age', editable: true },
{ headerName: 'Country', field: 'country', editable: true },
];
const onGridReady = (params) => {
// 获取数据并设置到rowData中
fetch('http://example.com/data')
.then((response) => response.json())
.then((data) => setRowData(data));
// 保存gridApi供后续使用
params.api.setRowData(rowData);
};
const onCellValueChanged = (params) => {
// 编辑单元格后,将修改的数据发送到服务器
fetch('http://example.com/update', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(params.data),
})
.then((response) => response.json())
.then((data) => {
// 更新rowData
const updatedRowData = rowData.map((row) => {
if (row.id === data.id) {
return data;
}
return row;
});
setRowData(updatedRowData);
});
};
return (
);
};
app.post('/update', (req, res) => {
// 处理更新请求,例如,将数据保存到数据库中
const updatedData = req.body;
// 进行更新操作
// 将更新后的数据发送回客户端
res.json(updatedData);
});
上述示例假设你的服务器是使用Node.js和Express框架搭建的。你需要根据你的实际情况进行相应的调整。