如何在MUI X Data Grid中选中行/复选框时展示全行数据？

核心实现思路 #

要获取并展示选中行的完整内容，你需要通过Data Grid的ref调用getSelectedRows()方法，该方法返回一个Map<GridRowId, GridRowModel>，将其转换为数组后即可序列化为JSON字符串展示。

具体步骤及代码修改 #

1. 创建Data Grid的引用
   在类组件中添加ref，用于获取Data Grid实例：

class YourComponent extends React.Component {
  // 创建grid实例的ref
  gridRef = React.createRef();
  
  // ... 其他已有代码
}

2. 给Data Grid绑定ref并修改事件回调
   在Data Grid组件上绑定ref，同时修改选择事件的处理逻辑：

<DataGrid
  data={serialsList || []}
  columns={columns}
  ref={this.gridRef} // 新增ref绑定
  options={{
    ...muiDataTableCommonOptions(),
    download: false,
    expandableRowsOnClick: false,
    search: false,
    page: currentPage,
    rowsPerPage: numberOfRows,
    count: serialsTotalCounts,
    selectableRows: this.state.cancelShipFlag ? 'multiple' : 'none',
    selectableRowsHeader: this.state.cancelShipFlag ? true : false,
    selectToolbarPlacement: 'none',
    // 修改选择事件回调，处理选中行
    onRowSelectionChange: () => {
      // 通过ref获取选中行的Map对象
      const selectedRowsMap = this.gridRef.current.getSelectedRows();
      // 将Map转换为数组
      const selectedRows = Array.from(selectedRowsMap.values());
      // 序列化为格式化的JSON字符串
      const selectedRowsJson = JSON.stringify(selectedRows, null, 2);
      // 打印结果或存到state用于页面展示
      console.log('选中行内容：', selectedRowsJson);
      this.setState({ selectedRowsJson });
    },
    // 点击行时也展示内容（仅允许选行时生效）
    onRowClick: (rowData) => {
      if (this.state.cancelShipFlag) {
        console.log('点击行内容：', JSON.stringify(rowData, null, 2));
      }
    },
  }}
/>

3. 在页面展示选中内容
   如果需要在页面上直接展示，可在组件的render方法中添加：

render() {
  return (
    <div>
      <DataGrid {/* 你的DataGrid组件 */} />
      {this.state.selectedRowsJson && (
        <div>
          <h3>选中行内容</h3>
          <pre>{this.state.selectedRowsJson}</pre>
        </div>
      )}
    </div>
  );
}

注意事项 #

• getSelectedRows()仅在Data Grid实例挂载后可用，确保调用时ref已指向有效实例。
• 你的selectableRows配置会根据cancelShipFlag切换状态，注意在事件回调中做相应判断，避免无效调用。

内容的提问来源于stack exchange，提问作者akshay_acharya