富文本树视图 - 选择

处理用户如何选择项目。

单项选择

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

数据表格
日期和时间选择器
图表
树视图

<RichTreeView items={MUI_X_PRODUCTS} />

<RichTreeView items={MUI_X_PRODUCTS} />

按 Enter 开始编辑

多项选择

使用 multiSelect 属性启用多项选择。

数据表格
日期和时间选择器
图表
树视图

<RichTreeView multiSelect items={MUI_X_PRODUCTS} />

<RichTreeView multiSelect items={MUI_X_PRODUCTS} />

按 Enter 开始编辑

禁用选择

如果您不希望您的项目可选择，请使用 disableSelection 属性

数据表格
日期和时间选择器
图表
树视图

<RichTreeView disableSelection items={MUI_X_PRODUCTS} />

<RichTreeView disableSelection items={MUI_X_PRODUCTS} />

按 Enter 开始编辑

复选框选择

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

数据表格
日期和时间选择器
图表
树视图

<RichTreeView checkboxSelection items={MUI_X_PRODUCTS} />

<RichTreeView checkboxSelection items={MUI_X_PRODUCTS} />

按 Enter 开始编辑

这也与多项选择兼容

数据表格
日期和时间选择器
图表
树视图

<RichTreeView multiSelect checkboxSelection items={MUI_X_PRODUCTS} />

<RichTreeView multiSelect checkboxSelection items={MUI_X_PRODUCTS} />

按 Enter 开始编辑

受控选择

使用 selectedItems 属性来控制选定的项目。

您可以使用 onSelectedItemsChange 属性来监听选定项目中的更改并相应地更新该属性。

数据表格
日期和时间选择器
图表
树视图

<div>
  <Button onClick={handleSelectClick}>
    {selectedItems.length === 0 ? 'Select all' : 'Unselect all'}
  </Button>
</div>
<Box sx={{ minHeight: 352, minWidth: 250 }}>
  <RichTreeView
    items={MUI_X_PRODUCTS}
    selectedItems={selectedItems}
    onSelectedItemsChange={handleSelectedItemsChange}
    multiSelect
  />
</Box>

<div>
  <Button onClick={handleSelectClick}>
    {selectedItems.length === 0 ? 'Select all' : 'Unselect all'}
  </Button>
</div>
<Box sx={{ minHeight: 352, minWidth: 250 }}>
  <RichTreeView
    items={MUI_X_PRODUCTS}
    selectedItems={selectedItems}
    onSelectedItemsChange={handleSelectedItemsChange}
    multiSelect
  />
</Box>

按 Enter 开始编辑

跟踪项目选择更改

如果您想对项目选择更改做出反应，请使用 onItemSelectionToggle 属性

未记录项目选择

数据表格
日期和时间选择器
图表
树视图

<Typography>
  {lastSelectedItem == null
    ? 'No item selection recorded'
    : `Last selected item: ${lastSelectedItem}`}
</Typography>
<Box sx={{ minHeight: 352, minWidth: 300 }}>
  <RichTreeView
    items={MUI_X_PRODUCTS}
    onItemSelectionToggle={handleItemSelectionToggle}
  />
</Box>

<Typography>
  {lastSelectedItem == null
    ? 'No item selection recorded'
    : `Last selected item: ${lastSelectedItem}`}
</Typography>
<Box sx={{ minHeight: 352, minWidth: 300 }}>
  <RichTreeView
    items={MUI_X_PRODUCTS}
    onItemSelectionToggle={handleItemSelectionToggle}
  />
</Box>

按 Enter 开始编辑

父/子项目选择关系

当项目的所有子项目都被选中时自动选择该项目，并在父项目被选中时自动选择所有子项目。

如果您无法升级，可以使用 selectedItems、onSelectedItemsChange 和 onItemSelectionToggle 属性创建自己的自定义解决方案

数据表格
日期和时间选择器
图表
树视图

<RichTreeView
  multiSelect
  checkboxSelection
  apiRef={apiRef}
  items={MUI_X_PRODUCTS}
  selectedItems={selectedItems}
  onSelectedItemsChange={handleSelectedItemsChange}
  onItemSelectionToggle={handleItemSelectionToggle}
/>

<RichTreeView
  multiSelect
  checkboxSelection
  apiRef={apiRef}
  items={MUI_X_PRODUCTS}
  selectedItems={selectedItems}
  onSelectedItemsChange={handleSelectedItemsChange}
  onItemSelectionToggle={handleItemSelectionToggle}
/>

按 Enter 开始编辑

命令式 API

要使用 apiRef 对象，您需要使用 useTreeViewApiRef Hook 初始化它，如下所示

const apiRef = useTreeViewApiRef();

return <RichTreeView apiRef={apiRef} items={ITEMS}>;

当您的组件首次渲染时，apiRef 将为 undefined。在此初始渲染之后，apiRef 包含以命令方式与树视图交互的方法。

选择或取消选择项目

使用 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,
});

数据表格
日期和时间选择器
图表
树视图

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

数据表格
日期和时间选择器
图表
树视图

API

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