将复选框更改为单选按钮 Material UI 数据网格

Question

我正在做一个 React 项目，目前使用 Material Ui 数据网格来显示数据。

我想要的是 table 我决定是要每行开头的复选框还是单选按钮。

当然，功能会随着单选按钮的变化而变化，我只能 select 一个数据，而使用复选框，我可以 select 多个数据。

我似乎找不到如何执行此操作。

感谢您的帮助。

Answer 1

前几天我也试过。它对我有用的唯一方法是使用 "Data table" 而不是“datagrid”。原因是datatable的代码简化了很多，可以随意摆弄

你的数据是hard-coded还是动态显示的？

我在 Table 标题部分的 Table 行下添加了一个空的 Table 单元格行（基本上为单选按钮创建一个空列，没有列名）：

   <TableHead>
   <TableRow>
   <TableCell></TableCell>
   <TableCell>Name</TableCell>
    <TableCell>Age</TableCell>
   </TableHead>
   </TableRow>

然后在我的行部分，我添加了一个 Radio 组件：

   <TableBody>
   <TableRow>
   <TableCell>
   <Radio
                      value={value}
                      checked={whatever}
                      onChange={handleRadiochange}
                      size="small"
                    />
 </TableCell>
<TableCell id="name"> John Smith </TableCell>
   <TableCell id="age"> 49 </TableCell>

因为我的行是动态生成的，所以按钮是随每一行生成的。你可以根据行数据给它一个唯一的{value}（我只是从我得到的数据中选择行中的唯一值，例如{rowsdata.ID}或{rowsdata.SSN）。

数据Table用途广泛，可以修改成Datagrid的样子。例如，我添加了 AppBar（以突出显示 selected 行值）、分页、table-footer 和悬停效果。

我唯一没有研究的是 select 单击后的行（和单选按钮）（这是在数据网格中发生的情况）。我认为这是多余的，因为 end-user 也可以单击单选按钮并达到相同的效果。

Answer 2

您可以在列对象中使用 renderCell 方法。您可以像这样渲染您想要的内容：

{
  field: 'bypass_group_id',
  headerName: ' ',
  width: 40,
  renderCell: (cellValues) => {
    return (
      <Radio 
        checked={cellValues.id === this.state.form.selectedGroup}
        onChange={this.handleChangeRadio.bind(this,cellValues.id)}
        value={cellValues.id}
        name="radio-buttons"
        inputProps={{ 'aria-label': {cellValues} }}
      />
     )
  }
}

Answer 3

这可以使用 material-ui 数据网格和单选按钮的 OnSelectionModelChange 道具来实现。

现场演示

将复选框更改为单选按钮 Material UI 数据网格

Change Checkbox to Radio Button Material UI Data Grid

datagrid

reactjs

material-ui