复选框上的多行选择和单击 MUI DataGrid 中的行时的单选

Question

我正在使用MUI DataGrid version 4 组件。

我想要的是：

1. 从数据网格中的复选框启用多项选择（如果用户使用复选框选择多行）
2. 禁用数据网格中行的多项选择（如果用户选择了多行）
3. 启用从数据网格中的行进行单选（如果用户在选择一行后选择另一行）。

但我得到的是：

1. 复选框中的多项选择已启用（我想要什么）
2. 已启用该行的多项选择（我不想要的）。

对于行选择，我只想要一个像这个答案MUI - Disable multiple row selection in DataGrid 这样的单一选择，但启用了复选框中的多个选择。

这是我的代码：https://codesandbox.io/s/material-ui-data-grid-selection-vq1ny

这是documentation for the selection on the Data Grid 组件。

注意：可以使用DataGridPro 组件。

如果问题不清楚，请告诉我。

Answer 1

您可以控制selectionModel 状态并检查用户是否单击了单元格（而不是复选框）。如果他们点击复选框，onCellClick 将不会被触发，如果他们点击其他单元格，onCellClick 将被触发，然后根据该信息相应地更新selectionModel：

const cellClickRef = React.useRef(null);
const [selectionModel, setSelectionModel] = React.useState([]);

return (
  <div style={{ height: 400, width: '100%' }}>
    <DataGrid
      checkboxSelection
      selectionModel={selectionModel}
      onCellClick={() => (cellClickRef.current = true)}
      onSelectionModelChange={(selection, detail) => {
        if (cellClickRef.current) {
          if (selection.length > 1) {
            const selectionSet = new Set(selectionModel);
            const result = selection.filter((s) => !selectionSet.has(s));

            setSelectionModel(result);
          } else {
            setSelectionModel(selection);
          }
        } else {
          setSelectionModel(selection);
        }
        cellClickRef.current = null;
      }}
      {...data}
    />
  </div>
);

相关答案

• MUI - Disable multiple row selection in DataGrid