如何在 mui x datagrid 中以编程方式选择/取消选择行

Question

在 Material UI X 的 DataGrid 中，我们可以使用键盘快捷键和鼠标选择或取消选择行，但如何在没有它们的情况下选择或取消选择。应根据条件自动选择或取消选择行，例如在某些事件或方法调用上切换行选择或单击自定义按钮或更改其他组件的数据

function DataGridDemo() {
  const { data, isLoading, error, refetch  } = useQuery('docs', Docs.getAll);

  const columns = useColumns();
  const [rows, setRows] = React.useState([]);

  useEffect(() => {
    data && setRows(data);
  }, [data]);
  

  return (
    <Box>

      <DataGrid
        disableRowSelectionOnClick
        checkboxSelection 
        loading={isLoading || rows?.length === 0 }
        rows={rows}
        columns={columns}
      />
        
    </Box>
  );
}


export default DataGridDemo;

Answer 1

DataGrid 组件为此有两个属性：

rowSelectionModel

：此属性定义当前选定的行 ID。将您的 selectedRows 状态变量传递给它。

onRowSelectionModelChange

：只要选择发生变化，就会触发此回调函数。使用它根据您的自定义逻辑更新您的 selectedRows 状态：

因此，您只需将行的 id 添加到 rowSelectionModel 中，如果您有选择复选框，它将自动选择行，然后它将自动选中。 并类似地删除应取消选择的行的 id。

无行选择表示状态

选择/取消选择行的基本逻辑的工作示例：

import React, { useState, useEffect } from 'react';
import { DataGrid } from '@mui/x-data-grid'; // version ^7.15.0
import { Button, Box } from '@mui/material';

function DataGridDemo() {
  const [rows, setRows] = useState([]);
  const [selectedRows, setSelectedRows] = useState([]);

  useEffect(() => {
    const fetchedData = [
      { id: 1, name: 'John Doe' },
      { id: 2, name: 'Jane Smith' },
      { id: 3, name: 'Alice Johnson' },
      { id: 4, name: 'Bob Brown' }
    ];
    setRows(fetchedData);
  }, []);

  const clearRowSelection = () => setSelectedRows([]);

  const selectEvenRows = () => {
    const evenRows = rows.filter(({id}) => (id) % 2 === 0).map(row => row.id);
    setSelectedRows(evenRows);
  };

  const deselectEvenRows = () => {
    const remainingRows = selectedRows.filter((id) => id % 2 !== 0);
    console.log({remainingRows})
    setSelectedRows(remainingRows);
  };

  return (
    <Box>
      {selectedRows+""}
      <DataGrid
        rows={rows}
        columns={[{ field: 'id' }, { field: 'name' }]}
        checkboxSelection
        rowSelectionModel={selectedRows}
        onRowSelectionModelChange={(newSelection) => setSelectedRows(newSelection)}
      />
      <Button onClick={clearRowSelection}>Clear Selections</Button>
      <Button onClick={selectEvenRows}>Select Even Rows</Button>
      <Button onClick={deselectEvenRows}>Deselect Even Rows</Button>
    </Box>
  );
}

export default DataGridDemo;

您可以使用自定义逻辑，例如：

  useEffect(() => {
    if (someCondition) {
      setSelectedRows([rowId1, rowId2]); // Select specific rows
    } else {
      setSelectedRows([]); 
    }
  }, [someCondition]);