reactjs - 如何删除 Material-UI DataGrid 中的多个选定行?
问题描述
我想知道如何DataGrid
使用 React 中的复选框从 Material-UI 中删除行。我还没有找到任何合适的教程来做这件事,DataGrid
尽管我找到了一个MaterialTable
但不一样的教程。
欢迎任何帮助。
更新
适应解决方案后我的完整代码:
import React, { useState, useEffect, Fragment } from 'react'
import {db} from './firebase';
import { useHistory, useLocation } from 'react-router-dom';
import "./ListadoEstudiantes.css"
import * as locales from '@mui/material/locale';
import { DataGrid,
GridRowsProp, GridColDef,
GridToolbarContainer, GridToolbarColumnsButton, GridToolbarFilterButton, GridToolbarExport, GridToolbarDensitySelector} from '@mui/x-data-grid';
import { Button, Container } from "@material-ui/core";
import { IconButton} from '@mui/material';
import PersonAddIcon from '@mui/icons-material/PersonAddSharp';
import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
import { Box } from '@mui/system';
function ListadoEstudiantes({user}) {
const history = useHistory("");
const crearEstudiante = () => {
history.push("/Crear_Estudiante");
};
const [estudiantesData, setEstudiantesData] = useState([])
const parseData = {
pathname: '/Crear_Pedidos',
data: estudiantesData
}
const realizarPedidos = () => {
if(estudiantesData == 0)
{
window.alert("Seleccione al menos un estudiante")
}
else {
history.push(estudiantesData);
}
};
function CustomToolbar() {
return (
<GridToolbarContainer>
<GridToolbarFilterButton />
<GridToolbarDensitySelector />
</GridToolbarContainer>
);
}
const [estudiantes, setEstudiantes] = useState([]);
const [selectionModel, setSelectionModel] = useState([]);
const columns = [
{ field: 'id', headerName: 'ID', width: 100 },
{field: 'nombre', headerName: 'Nombre', width: 200},
{field: 'colegio', headerName: 'Colegio', width: 250},
{field: 'grado', headerName: 'Grado', width: 150},
{
field: "delete",
width: 75,
sortable: false,
disableColumnMenu: true,
renderHeader: () => {
return (
<IconButton
onClick={() => {
const selectedIDs = new Set(selectionModel);
setEstudiantes((r) => r.filter((x) => !selectedIDs.has(x.id)));
}}
>
<DeleteOutlinedIcon />
</IconButton>
);
}
}
];
const estudiantesRef = db.collection("usuarios").doc(user.uid).collection("estudiantes")
useEffect(() => {
estudiantesRef.onSnapshot(snapshot => {
const tempData = [];
snapshot.forEach((doc) => {
const data = doc.data();
tempData.push(data);
});
setEstudiantes(tempData);
})
}, []);
return (
<Container fixed>
<Box mb={5} pt={2} sx={{textAlign:'center'}}>
<Button
startIcon = {<PersonAddIcon />}
variant = "contained"
color = "primary"
size = "medium"
onClick={crearEstudiante} >
Crear Estudiantes
</Button>
<Box pl={25} pt={2} sx={{height: '390px', width: "850px", textAlign:'center'}}>
<DataGrid
rows={estudiantes}
columns={columns}
pageSize={5}
rowsPerPageOptions={[5]}
components={{
Toolbar: CustomToolbar,
}}
checkboxSelection
//Store Data from the row in another variable
onSelectionModelChange = {(id) => {
setSelectionModel(id);
const selectedIDs = new Set(id);
const selectedRowData = estudiantes.filter((row) =>
selectedIDs.has(row.id)
);
setEstudiantesData(selectedRowData)
console.log(estudiantesData);
}
}
{...estudiantes}
/>
</Box></Box></Container>
)
}
export default ListadoEstudiantes
更新 一切正常!谢谢你
解决方案
selectionModel
您可以通过/ props跟踪当前选择的 ID ,并在用户单击标题onSelectionModelChange
时执行必要的操作。IconButton
因为renderHeader
回调不提供选择状态,所以我必须通过将columns
定义放在函数体中来使用闭包,这样我就可以selectionModel
在回调中引用:
const [rows, setRows] = React.useState(_rows);
const [selectionModel, setSelectionModel] = React.useState([]);
const columns: GridColDef[] = [
{ field: "col1", headerName: "Column 1", width: 150 },
{ field: "col2", headerName: "Column 2", width: 150 },
{
field: "delete",
width: 75,
sortable: false,
disableColumnMenu: true,
renderHeader: () => {
return (
<IconButton
onClick={() => {
const selectedIDs = new Set(selectionModel);
// you can call an API to delete the selected IDs
// and get the latest results after the deletion
// then call setRows() to update the data locally here
setRows((r) => r.filter((x) => !selectedIDs.has(x.id)));
}}
>
<DeleteIcon />
</IconButton>
);
}
}
];
return (
<div style={{ height: 400, width: "100%" }}>
<DataGrid
rows={rows}
columns={columns}
checkboxSelection
onSelectionModelChange={(ids) => {
setSelectionModel(ids);
}}
/>
</div>
);
推荐阅读
- linux - Linux 上缺少带有 Rust 和 Amethyst 的库
- javascript - 以编程方式修改数组 | Javascript
- javascript - 当它们实际上是 2 的幂时,ThreeJS 调整图像大小的问题
- python-3.x - 使用 Python 上传 Azure Cloud Functions HTTP 文件
- java - com.thoughtworks.xstream.converters.ConversionException 使用 maven eclipse 运行 jmeter 脚本
- ios - Why doesn't the UILabel show when the simulator is in Landscape Mode?
- c# - 查找字符串的位置
- c++ - gtest 如何比较嵌套容器
- c# - WCF 应用程序中的修改不起作用
- javascript - 如何在 v-for 循环中仅打印第一个获胜者?