数据表格 - 行选择

行选择允许用户选择和高亮显示单行或多行，以便他们可以对其进行操作。

单行选择

对于 MIT 数据表格组件，默认启用单行选择。您可以通过单击行来选择行，或使用键盘快捷键。要取消选择行，请按住 Ctrl 键（MacOS 上为 Cmd 键）并单击它。

多行选择

在 Data Grid Pro 和 Data Grid Premium 组件上，您可以通过两种方式选择多行

• 要选择多个独立的行，请在选择行的同时按住 Ctrl 键（MacOS 上为 Cmd 键）。
• 要选择一系列行，请在选择行的同时按住 Shift 键。
• 要禁用多行选择，请使用 disableMultipleRowSelection={true}。

禁用点击行选择

您的单元格中可能包含交互式内容，并且需要禁用单击时选择行。在这种情况下，请使用 disableRowSelectionOnClick 属性。

禁用特定行的选择

使用 isRowSelectable 属性来指示是否可以选择行。它使用 GridRowParams 对象调用，应返回布尔值。如果未指定，则所有行都是可选择的。

在下面的演示中，仅可以选择数量超过 50,000 的行

带筛选的行选择

默认情况下，当行被筛选时，会清除不符合筛选条件的行的选择。要保持这些行即使在不可见时也处于选中状态，请设置 keepNonExistentRowsSelected 属性。

受控行选择

使用 rowSelectionModel 属性来控制选择。每次此属性更改时，都会使用新的选择值调用 onRowSelectionModelChange 回调。

复选框选择

要激活复选框选择，请设置 checkboxSelection={true}。

自定义复选框列

如果您使用 GRID_CHECKBOX_SELECTION_FIELD 字段向数据表格提供自定义复选框列，则数据表格将不会添加自己的列。

我们强烈建议使用 GRID_CHECKBOX_SELECTION_COL_DEF 变量，而不是重新定义所有自定义属性。

在以下演示中，复选框列已移至右侧，其宽度已增加到 100px。

自定义不确定状态复选框行为

父复选框（如“全选”复选框）在不确定状态下单击时，将取消选择选定的行。您可以使用 indeterminateCheckboxAction 属性来自定义此行为。

可见行选择

默认情况下，当您单击“全选”复选框时，将选择数据表格中的所有行。如果您想更改此行为，并且仅选择当前页面上可见的行，则可以使用 checkboxSelectionVisibleOnly 属性。

与服务器端分页一起使用

将受控选择与 paginationMode="server" 一起使用可能会导致在页面更改时丢失选定的行。发生这种情况是因为数据表格与 rows 属性交叉检查，并且仅使用现有行 ID 调用 onRowSelectionModelChange。根据您的服务器端实现，当页面更改并且 rows 属性的新值不包含先前选定的行时，数据表格将使用空值调用 onRowSelectionModelChange。为防止这种情况，请启用 keepNonExistentRowsSelected 属性，即使行不存在也保持选中状态。

<DataGrid keepNonExistentRowsSelected />

通过使用这种方法，单击全选复选框可能仍然会选中某些行。清理选择模型取决于您，使用 rowSelectionModel 属性。以下演示展示了该属性的实际应用

apiRef

网格公开了一组方法，这些方法使用命令式 apiRef 启用所有这些功能。要了解有关如何使用它的更多信息，请查看 API 对象 部分。

API

• DataGrid
• DataGridPro
• DataGridPremium