富文本树视图 - 标签编辑

了解如何编辑树视图项目的标签。

启用标签编辑

您可以使用 isItemEditable 属性来启用编辑。如果设置为 true，此属性将启用所有项目的标签编辑

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

<RichTreeView
  items={MUI_X_PRODUCTS}
  isItemEditable
  experimentalFeatures={{ labelEditing: true }}
  defaultExpandedItems={['grid', 'pickers']}
/>

<RichTreeView
  items={MUI_X_PRODUCTS}
  isItemEditable
  experimentalFeatures={{ labelEditing: true }}
  defaultExpandedItems={['grid', 'pickers']}
/>

按下 Enter 键开始编辑

限制编辑某些项目

如果您将一个方法传递给 isItemEditable，则只有该方法返回 true 的项目才是可编辑的

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

<RichTreeView
  items={MUI_X_PRODUCTS}
  isItemEditable={(item) => Boolean(item?.editable)}
  experimentalFeatures={{ labelEditing: true }}
  defaultExpandedItems={['grid', 'pickers']}
/>

<RichTreeView
  items={MUI_X_PRODUCTS}
  isItemEditable={(item) => Boolean(item?.editable)}
  experimentalFeatures={{ labelEditing: true }}
  defaultExpandedItems={['grid', 'pickers']}
/>

按下 Enter 键开始编辑

限制编辑叶节点

您可以将编辑限制为仅树的叶节点。

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

<RichTreeView
  items={MUI_X_PRODUCTS}
  apiRef={apiRef}
  experimentalFeatures={{ labelEditing: true }}
  isItemEditable={(item) =>
    apiRef.current!.getItemOrderedChildrenIds(item.id).length === 0
  }
  defaultExpandedItems={['grid', 'pickers']}
/>

<RichTreeView
  items={MUI_X_PRODUCTS}
  apiRef={apiRef}
  experimentalFeatures={{ labelEditing: true }}
  isItemEditable={(item) =>
    apiRef.current!.getItemOrderedChildrenIds(item.id).length === 0
  }
  defaultExpandedItems={['grid', 'pickers']}
/>

按下 Enter 键开始编辑

追踪项目标签更改

使用 onItemLabelChange 属性在项目标签更改时触发操作。

尚未编辑任何项目

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

更改默认行为

默认情况下，如果存在新值，模糊树项目将保存新值。要修改此行为，请使用 <TreeItem2 /> 的 slotProps。

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

<RichTreeView
  items={MUI_X_PRODUCTS}
  slots={{ item: CustomTreeItem2 }}
  experimentalFeatures={{ labelEditing: true }}
  isItemEditable
  defaultExpandedItems={['grid', 'pickers']}
/>

<RichTreeView
  items={MUI_X_PRODUCTS}
  slots={{ item: CustomTreeItem2 }}
  experimentalFeatures={{ labelEditing: true }}
  isItemEditable
  defaultExpandedItems={['grid', 'pickers']}
/>

按下 Enter 键开始编辑

验证

您可以覆盖 labelInput 的事件处理程序，并使用 useTreeItem2Utils 中的交互方法实现自定义验证逻辑。

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

<RichTreeView
  items={MUI_X_PRODUCTS}
  slots={{ item: CustomTreeItem2 }}
  isItemEditable
  experimentalFeatures={{ labelEditing: true }}
  defaultExpandedItems={['grid', 'pickers']}
/>

<RichTreeView
  items={MUI_X_PRODUCTS}
  slots={{ item: CustomTreeItem2 }}
  isItemEditable
  experimentalFeatures={{ labelEditing: true }}
  defaultExpandedItems={['grid', 'pickers']}
/>

按下 Enter 键开始编辑

仅使用图标启用编辑

下面的演示展示了如何完全覆盖编辑行为，并使用图标实现它。

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

<RichTreeView
  items={MUI_X_PRODUCTS}
  slots={{ item: CustomTreeItem2 }}
  experimentalFeatures={{ labelEditing: true }}
  isItemEditable
  defaultExpandedItems={['grid', 'pickers']}
  expansionTrigger="iconContainer"
/>

<RichTreeView
  items={MUI_X_PRODUCTS}
  slots={{ item: CustomTreeItem2 }}
  experimentalFeatures={{ labelEditing: true }}
  isItemEditable
  defaultExpandedItems={['grid', 'pickers']}
  expansionTrigger="iconContainer"
/>

按下 Enter 键开始编辑

创建自定义 labelInput

下面的演示展示了如何在 labelInput 插槽中使用不同的组件。

Jane Doe
Liam Clarke

<RichTreeView
  items={ITEMS}
  slots={{ item: CustomTreeItem2 }}
  experimentalFeatures={{ labelEditing: true }}
  isItemEditable
  defaultExpandedItems={['1', '2']}
  getItemLabel={(item) => `${item.firstName} ${item.lastName}`}
/>

<RichTreeView
  items={ITEMS}
  slots={{ item: CustomTreeItem2 }}
  experimentalFeatures={{ labelEditing: true }}
  isItemEditable
  defaultExpandedItems={['1', '2']}
  getItemLabel={(item) => `${item.firstName} ${item.lastName}`}
/>

按下 Enter 键开始编辑

命令式 API

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

const apiRef = useTreeViewApiRef();

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

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

更改项目的标签

使用 setItemExpansion API 方法更改项目的展开状态。

apiRef.current.updateItemLabel(
  // The id of the item to to update
  itemId,
  // The new label of the item.
  newLabel,
);

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

<Stack spacing={2} direction="row">
  <Button onClick={handleUpdateLabel}>
    {isLabelUpdated ? 'Reset Data Grid label' : 'Change Data Grid label'}
  </Button>
</Stack>
<Box sx={{ minHeight: 352, minWidth: 260 }}>
  <RichTreeView items={MUI_X_PRODUCTS} apiRef={apiRef} />
</Box>

<Stack spacing={2} direction="row">
  <Button onClick={handleUpdateLabel}>
    {isLabelUpdated ? 'Reset Data Grid label' : 'Change Data Grid label'}
  </Button>
</Stack>
<Box sx={{ minHeight: 352, minWidth: 260 }}>
  <RichTreeView items={MUI_X_PRODUCTS} apiRef={apiRef} />
</Box>

按下 Enter 键开始编辑