对于更新列中的单元格,我使用“type:“数据网格”列定义中的“singleSelect”和“valueOptions”。
const columns = [
{
field: "id",
headerName: "ID",
sortable: true,
maxWidth: 80,
flex: 1,
},
{ field: "date", headerName: "Date", flex: 1, maxWidth: 120 },
{
field: "source",
headerName: "Source",
type: "string",
sortable: false,
flex: 1,
maxWidth: 120
},
{
field: "status",
headerName: "Status",
flex: 1,
editable: true,
type: "singleSelect",
valueOptions: [
{ value: 1, label: " " },
{ value: "Confirmed", label: "Confirmed" },
{ value: "Didn't answer", label: "Didn't answer" },
{ value: "Received", label: "Received" },
{ value: "Duplicated", label: "Duplicated" },
{ value: "Complaint", label: "Complaint" },
],
如何获取单元格的行id和更新值并通过axios发送到服务器?
我使用React Material UI社区版v5。
我试过renderCell来使用Select组件,但是看起来很难看
1条答案
按热度按时间rdrgkggo1#
数据网格有一个名为"onCellEditCommit"的prop。您可以将axios函数添加到其中,它将从编辑过的单元格中传递更新后的行数据。
从MUI数据网格API:https://mui.com/x/api/data-grid/data-grid/#props:~:text=onCellEditCommit,for%20this%20callback.