我可以在 material-ui DataGrid 中初始化复选框选择吗？

Question

在 material-ui DataGrid 中，通过checkboxSelection属性添加复选框选择并通过以下方式收听选择更改非常容易onSelectionChange：

<DataGrid
  columns={columns}
  rows={rows}
  pageSize={10}
  checkboxSelection
  onSelectionChange={e => console.log(e.rows)} />

但是有没有办法用一组选中的项目初始化复选框选择？

Answer 1

将selectionModel道具传递给DataGrid. 它是您希望在开始时选择的行的 ID 数组。

const rows = [
  { id: 1, lastName: "Snow", firstName: "Jon", age: 35 },
  { id: 2, lastName: "Lannister", firstName: "Cersei", age: 42 },
  { id: 3, lastName: "Lannister", firstName: "Jaime", age: 45 },
  { id: 4, lastName: "Stark", firstName: "Arya", age: 16 },
  { id: 5, lastName: "Targaryen", firstName: "Daenerys", age: null },
  { id: 6, lastName: "Melisandre", firstName: null, age: 150 },
  { id: 7, lastName: "Clifford", firstName: "Ferrara", age: 44 },
  { id: 8, lastName: "Frances", firstName: "Rossini", age: 36 },
  { id: 9, lastName: "Roxie", firstName: "Harvey", age: 65 }
];

function MyDataGrid() {
  // select any characters older than 40
  const selectionModel = rows.filter((r) => r.age > 40).map((r) => r.id)

  return (
    <DataGrid
      checkboxSelection
      rows={rows}
      columns={columns}
      selectionModel={selectionModel} // [2, 3, 6, 7, 9]
    />
  );
}

现场演示

旧答案

您可以通过调用更新行的选择状态GridApi.selectRows(ids)。GridApi实例可以从apiRef. 但它apiRef是一项企业功能，无法DataGrid直接使用。幸运的是，您可以ComponentParams使用以下 hack来访问它：

const apiRef = React.useRef<GridApi>(null);

...

<DataGrid
  components={{
    NoRowsOverlay: (params) => {
      if (!apiRef.current) {
        apiRef.current = params.api.current;
      }
      return <div>No rows</div>;
    }
  }}
  {...}
/>

初始化后GridApi，您可以像这样以编程方式更改默认行选择

const apiRef = React.useRef<GridApi>(null);
const { data } = useDemoData({
  dataSet: "Commodity",
  rowLength: 10,
  maxColumns: 6
});

React.useEffect(() => {
  const rows = apiRef.current?.getRowModels();
  const selectedIds = [];

  rows?.forEach((r) => {
    if (r.quantity > 20000) {
      selectedIds.push(r.id);
    }
  });
  apiRef.current?.selectRows(selectedIds);
}, [data]);

现场演示