豐富樹狀檢視 - 排序

拖放您的項目以重新排序。

若要能夠重新排序項目，您必須先啟用 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 將項目的新位置傳送到您的後端 (backend)

資料網格
日期和時間選擇器
圖表
樹狀檢視

尚未註冊重新排序

如果您想將整個資料集傳送到您的後端 (backend)，您可以使用 getItemTree API 方法。以下示範透過在您進行重新排序時，將第一個樹狀檢視與第二個樹狀檢視同步來展示此功能

資料網格
日期和時間選擇器
圖表
樹狀檢視

資料網格
日期和時間選擇器
圖表
樹狀檢視

自訂

僅從拖曳把手觸發重新排序

您可以建立自訂的 Tree Item 元件來呈現拖曳把手圖示，並僅在從其拖曳時觸發重新排序

資料網格
日期和時間選擇器
圖表
樹狀檢視

<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) 和類別的完整參考。