javascript - MUI DataGrid 中的 checkboxSelection 可以区分单次检查和多次检查吗？

Question

checkboxSelection 是否有多个检查与单个检查的选项？

我在文档中看到的唯一内容是受控选择，它基本上“存储”了您所做的检查和行（如果我理解正确的话）以及我在Api Ref中看到的提到行范围的内容

selectRowRange: (range: {
      endId: GridRowId; startId: GridRowId 
   }, 

isSelected?: boolean, resetSelection?: boolean) => void

就像我想做的那样，如果您检查主要的（选择所有内容的）然后执行“x”

我有一段代码要在其中编辑行，我希望如果我选择该行仅启用该行的编辑模式，并且如果我选中选择全部并标记全部的复选框，然后在所有行上启用编辑模式（仍在努力，但这就是想法）

我要求这样做是因为基本上当我选择所有这些并“编辑”（我在那里有一个警报）时，它会根据我选择的用户数量显示警报 x 次，这是有道理的，否则我不会当我这样做时，无法一次性删除我的用户

这就是我到目前为止所拥有的

//Variables
const [selectionModel, setSelectionModel] = useState([]);
const [editRowsModel, setEditRowsModel] = React.useState({});
const handleEditRowsModelChange = React.useCallback((model) => {
  setEditRowsModel(model);
}, []);

//Edit Component
{field: "edit", width: 70, sortable: false, disableColumnMenu: true,
      renderHeader: () => {
        return (
          <IconButton
          onClick={() => {
            const selectedIDs = new Set(selectionModel);
            estudiantes.filter((x) =>
            selectedIDs.has(x.id)).map( x => {
              alert("test")
              /*const temporalQuery = db.collection("usuarios").doc(user.uid).collection("estudiantes").doc(x.id);
              temporalQuery.update({
                //update smart coding
                nombre: "edited name",
                colegio: "edited school",
                grado: "edited course"
              })*/
            })
          }}
          >
            <EditSharpIcon />
          </IconButton>
        );
      }
    }

//Data Grid
<DataGrid 
        localeText={esES.components.MuiDataGrid.defaultProps.localeText}
        
        rows={estudiantes}
        columns={columns}
        autoHeight 

        pageSize={pageSize}
        onPageSizeChange={(newPageSize) => setPageSize(newPageSize)}
        rowsPerPageOptions={[5, 10, 20]} 

        editRowsModel={editRowsModel}
        editMode="row"
        onEditRowsModelChange={handleEditRowsModelChange}
        
        components={{
          Toolbar: CustomToolbar,
        }}

        checkboxSelection
        //Select component
        onSelectionModelChange = {(id) => {
          setSelectionModel(id);
          const selectedIDs = new Set(id);
          const selectedRowData = estudiantes.filter((row) =>
            selectedIDs.has(row.id)
          );
          setEstudiantesData(selectedRowData)
        }
      }

      onCellDoubleClick={(params, event) => {
        if (!event.ctrlKey) {
          event.defaultMuiPrevented = true;
        }
      }}
      />

标签： javascriptreactjsdatagridmaterial-ui