跳到内容
+

简单树状视图 - 选择

了解如何为树状视图组件启用项目选择。

单项选择

默认情况下,树状视图允许选择单个项目。

多项选择

使用 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
    • @mui/x-data-grid-premium

当使用 multiSelect 时,您可以使用 keepExistingSelection 属性来避免丢失已选择的项目

  • 数据网格
    • @mui/x-data-grid
    • @mui/x-data-grid-pro
    • @mui/x-data-grid-premium

API

请参阅下面的文档,以获得此处提及的组件的所有属性和类的完整参考。