材料ui datagrid复选框行选择不起作用

Posted 2023-02-22

【中文标题】材料ui datagrid复选框行选择不起作用

【英文标题】：material ui datagrid checkbox row selection is not working

【发布时间】：2021-05-29 15:38:30

【问题描述】：

 <DataGrid
                className="list"
                pagingation
                rows=registeredClasses 
                columns=this.getColumns()
                pageSize=10
                rowLength=10
                autoHeight
                // sortModel=sortModel
                components=
                  pagination:CustomPagination
                
                checkboxSelection
                onSelectionChange=(newSelection) =>
                  console.log(newSelection)
                
                
               
              />

也尝试使用 onSelectionModelChange，只有当我点击行时才会发生选择，如果我点击复选框则不会发生

【问题讨论】：

@jharris711 的以下答案应该可以工作。

【参考方案1】：

v4.0.0-alpha.34 +

版本v4.0.0-alpha.34 包含重大更改。 onRowSelected 已被删除，onSelectionModelChange 现在返回一个包含所选行索引的数组。您可以通过onSelectionModelChange直接更改选择模型：

Material UI 文档中的示例：

import * as React from 'react'
import  DataGrid  from '@material-ui/data-grid'
import  useDemoData  from '@material-ui/x-grid-data-generator'

export default function ControlledSelectionGrid() 
  const  data  = useDemoData(
    dataSet: 'Commodity',
    rowLength: 10,
    maxColumns: 6,
  )

  const [selectionModel, setSelectionModel] = React.useState([])

  return (
    <div style= height: 400, width: '100%' >
      <DataGrid
        checkboxSelection
        onSelectionModelChange=(newSelectionModel) => 
          setSelectionModel(newSelectionModel)
        
        selectionModel=selectionModel
        ...data
      />
    </div>
  )

Updated Demo on Code Sandbox

Material UI Docs - Controlled Selection

Material UI DataTable Change Log on GitHub

版本 4.0.0-alpha.21：

代替

onSelectionChange=(newSelection) => 
    console.log(newSelection)

试试onRowSelected，像这样：

onRowSelected=(GridRowSelectedParams) => 
    console.log(GridRowSelectedParams);

如果你想跟踪所有行的选择状态，你应该使用这个：

onSelectionModelChange=(GridSelectionModelChangeParams) => 
    // This will return selections: [selected row indexes]
    console.log(GridSelectionModelChangeParams);
    if (Array.isArray(GridSelectionModelChangeParams.selectionModel)) 
        // Iterate the selection indexes:
        GridSelectionModelChangeParams.selectionModel.forEach(
            // Get the row data:
            (selection_index) => console.log(rows[selection_index])
        );
    

我设置了一个Code Sandbox with a working demo 供你试用

【讨论】：

非常感谢。我到处都看到 onSelectionChange 对我不起作用，但 onRowSelected 现在正在提供正确的控制台日志。

我已经在本地使用 console.logs 进行了尝试，但这不再有效。 onRowSelected 不记录任何内容，onSelectionModelChange 抛出此错误：react-dom.development.js?61bb:4091 Uncaught TypeError: Cannot read property 'length' of undefined at Object.onSelectionModelChange [as propOnChange]。这是上周工作的。知道发生了什么变化吗？

@maestro777 v4.0.0-alpha.34 版本引入了重大更改。 onRowSelected 已被删除，onSelectionModelChanged 已被修改。我已经使用文档中的示例、更改日志更新了答案，并添加了一个新的演示。希望对您有所帮助！

@jharris711 这对我帮助很大。谢谢！