富文本树视图 - 排序

拖放项目以重新排序。

要能够重新排序项目，您首先必须启用 indentationAtItemLevel 和 itemsReordering 实验性功能

<RichTreeViewPro
  items={ITEMS}
  experimentalFeatures={{ indentationAtItemLevel: true, itemsReordering: true }}
/>

有关更多详细信息，请参阅树项目自定义 - 在项目级别应用嵌套项目的缩进。

启用拖放重新排序

您可以通过将 itemsReordering prop 设置为 true 来启用项目的拖放重新排序

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

<RichTreeViewPro
  items={ITEMS}
  itemsReordering
  defaultExpandedItems={['grid', 'pickers']}
  experimentalFeatures={{
    indentationAtItemLevel: true,
    itemsReordering: true,
  }}
/>

<RichTreeViewPro
  items={ITEMS}
  itemsReordering
  defaultExpandedItems={['grid', 'pickers']}
  experimentalFeatures={{
    indentationAtItemLevel: true,
    itemsReordering: true,
  }}
/>

按 Enter 键开始编辑

限制重新排序

默认情况下，所有项目都是可重新排序的。您可以使用 isItemReorderable prop 阻止某些项目重新排序。以下示例展示了如何仅允许使用 getItemOrderedChildrenIds API 方法重新排序叶子节点。

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

<RichTreeViewPro
  items={MUI_X_PRODUCTS}
  itemsReordering
  defaultExpandedItems={['grid', 'pickers']}
  experimentalFeatures={{
    indentationAtItemLevel: true,
    itemsReordering: true,
  }}
  apiRef={apiRef}
  isItemReorderable={(itemId) =>
    apiRef.current!.getItemOrderedChildrenIds(itemId).length === 0
  }
/>

<RichTreeViewPro
  items={MUI_X_PRODUCTS}
  itemsReordering
  defaultExpandedItems={['grid', 'pickers']}
  experimentalFeatures={{
    indentationAtItemLevel: true,
    itemsReordering: true,
  }}
  apiRef={apiRef}
  isItemReorderable={(itemId) =>
    apiRef.current!.getItemOrderedChildrenIds(itemId).length === 0
  }
/>

按 Enter 键开始编辑

您还可以使用 canMoveItemToNewPosition prop 限制项目可以被放置在哪些项目中。以下示例展示了如何仅允许在同一父级内重新排序

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

<RichTreeViewPro
  items={MUI_X_PRODUCTS}
  itemsReordering
  defaultExpandedItems={['grid', 'pickers']}
  experimentalFeatures={{
    indentationAtItemLevel: true,
    itemsReordering: true,
  }}
  canMoveItemToNewPosition={(params) =>
    params.oldPosition.parentId === params.newPosition.parentId
  }
/>

<RichTreeViewPro
  items={MUI_X_PRODUCTS}
  itemsReordering
  defaultExpandedItems={['grid', 'pickers']}
  experimentalFeatures={{
    indentationAtItemLevel: true,
    itemsReordering: true,
  }}
  canMoveItemToNewPosition={(params) =>
    params.oldPosition.parentId === params.newPosition.parentId
  }
/>

按 Enter 键开始编辑

响应项目重新排序

您可以使用 onItemPositionChange 将项目的新位置发送到您的后端

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

尚未注册重新排序

如果您想将整个数据集发送到后端，可以使用 getItemTree API 方法。以下演示通过在您进行重新排序时将第一个树视图与第二个树视图同步来演示这一点

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

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

自定义

仅从拖动手柄触发重新排序

您可以创建一个自定义的树项目组件来渲染一个拖动手柄图标，并仅在从该图标拖动时触发重新排序

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

<RichTreeViewPro
  items={MUI_X_PRODUCTS}
  defaultExpandedItems={['grid', 'pickers']}
  experimentalFeatures={{
    indentationAtItemLevel: true,
    itemsReordering: true,
  }}
  itemsReordering
  slots={{ item: CustomTreeItem }}
/>

<RichTreeViewPro
  items={MUI_X_PRODUCTS}
  defaultExpandedItems={['grid', 'pickers']}
  experimentalFeatures={{
    indentationAtItemLevel: true,
    itemsReordering: true,
  }}
  itemsReordering
  slots={{ item: CustomTreeItem }}
/>

按 Enter 键开始编辑

常用示例

文件资源管理器

以下示例是文件资源管理器示例的简化版本，带有拖放重新排序功能。您可以重新排序项目，但只能在文件夹内（或回收站内）。

文档
已收藏
历史记录
回收站

API

请参阅下面的文档，以获得此处提到的组件的所有可用 props 和类的完整参考。