- 数据网格
- 日期和时间选择器
- 图表
- 树状视图
多项选择
使用 multiSelect
属性启用多项选择。
- 数据网格
- 日期和时间选择器
- 图表
- 树状视图
禁用选择
如果您不希望您的项目可选择,请使用 disableSelection
属性
- 数据网格
- 日期和时间选择器
- 图表
- 树状视图
复选框选择
要激活复选框选择,请设置 checkboxSelection={true}
- 数据网格
- 日期和时间选择器
- 图表
- 树状视图
这也与多项选择兼容
- 数据网格
- 日期和时间选择器
- 图表
- 树状视图
受控选择
使用 selectedItems
属性来控制选定的树状视图项目。您还可以使用 onSelectedItemsChange
属性来监听所选项目的更改并相应地更新属性。
- 数据网格
- 日期和时间选择器
- 图表
- 树状视图
跟踪项目选择更改
如果您想对项目选择更改做出反应,请使用 onItemSelectionToggle
属性
未记录项目选择
- 数据网格
- 日期和时间选择器
- 图表
- 树状视图
命令式 API
选择或取消选择项目
使用 selectItem
API 方法选择或取消选择项目
apiRef.current.selectItem({
// The DOM event that triggered the change
event,
// The id of the item to select or deselect
itemId,
// If `true`, the other already selected items will remain selected
// Otherwise, they will be deselected
// This parameter is only relevant when `multiSelect` is `true`
keepExistingSelection,
// If `true` the item will be selected
// If `false` the item will be deselected
// If not defined, the item's new selection status will be the opposite of its current one
shouldBeSelected,
});
- @mui/x-data-grid
- @mui/x-data-grid-pro
- 日期和时间选择器
- 图表
- 树状视图
当使用 multiSelect
时,您可以使用 keepExistingSelection
属性来避免丢失已选择的项目
- @mui/x-data-grid
- @mui/x-data-grid-pro
- 日期和时间选择器
- 图表
- 树状视图