豐富樹狀檢視 - 項目

將資料傳遞到您的樹狀檢視。

基本用法

項目可以使用 items 屬性定義，該屬性預期為物件陣列。

項目識別符

每個項目都必須具有唯一的識別符。

此識別符在內部用於識別各種模型中的項目，並在更新時追蹤項目。

預設情況下，豐富樹狀檢視元件會在資料集中尋找名為 id 的屬性以取得該識別符

const ITEMS = [{ id: 'tree-view-community' }];

<RichTreeView items={ITEMS} />;

如果項目的識別符未命名為 id，則您需要使用 getItemId 屬性來告知豐富樹狀檢視元件其位置。

以下示範展示如何使用 getItemId 從名為 internalId 的屬性中抓取唯一識別符

const ITEMS = [{ internalId: 'tree-view-community' }];

function getItemId(item) {
  return item.internalId;
}

<RichTreeView items={ITEMS} getItemId={getItemId} />;

項目標籤

每個項目都必須有一個標籤，標籤不需要是唯一的。

預設情況下，豐富樹狀檢視元件會在資料集中尋找名為 label 的屬性以取得該標籤

const ITEMS = [{ label: '@mui/x-tree-view' }];

<RichTreeView items={ITEMS} />;

如果項目的標籤未命名為 label，則您需要使用 getItemLabel 屬性來告知豐富樹狀檢視元件其位置

以下示範展示如何使用 getItemLabel 從名為 name 的屬性中抓取唯一識別符

const ITEMS = [{ name: '@mui/x-tree-view' }];

function getItemLabel(item) {
  return item.name;
}

<RichTreeView items={ITEMS} getItemLabel={getItemLabel} />;

停用的項目

使用豐富樹狀檢視上的 isItemDisabled 屬性來停用與樹狀項目的互動和焦點

function isItemDisabled(item) {
  return item.disabled ?? false;
}

<RichTreeView isItemDisabled={isItemDisabled} />;

焦點停用的項目

使用 disabledItemsFocusable 屬性來控制是否可以聚焦停用的樹狀項目。

當此屬性設定為 false 時

• 使用鍵盤方向鍵導航將不會聚焦停用的項目，而是會聚焦下一個未停用的項目。
• 輸入停用項目標籤的第一個字元將不會將焦點移動到該項目。
• 滑鼠或鍵盤互動將不會展開/摺疊停用的項目。
• 滑鼠或鍵盤互動將不會選取停用的項目。
• Shift + 方向鍵將跳過停用的項目，而是會選取下一個未停用的項目。
• 程式化的焦點將不會聚焦停用的項目。

當它設定為 true 時

• 使用鍵盤方向鍵導航將聚焦停用的項目。
• 輸入停用項目標籤的第一個字元將會將焦點移動到該項目。
• 滑鼠或鍵盤互動將不會展開/摺疊停用的項目。
• 滑鼠或鍵盤互動將不會選取停用的項目。
• Shift + 方向鍵將不會跳過停用的項目，但不會選取停用的項目。
• 程式化的焦點將會聚焦停用的項目。

追蹤項目點擊

使用 onItemClick 屬性來追蹤點擊的項目

命令式 API

依 ID 取得項目

使用 getItem API 方法依其 ID 取得項目。

const item = apiRef.current.getItem(
  // The id of the item to retrieve
  itemId,
);

依 ID 取得項目的 DOM 元素

使用 getItemDOMElement API 方法依其 ID 取得項目的 DOM 元素。

const itemElement = apiRef.current.getItemDOMElement(
  // The id of the item to get the DOM element of
  itemId,
);

取得目前的項目樹狀結構

使用 getItemTree API 方法取得目前的項目樹狀結構。

const itemTree = apiRef.current.getItemTree();

依 ID 取得項目的子項目

使用 getItemOrderedChildrenIds API 方法依其 ID 取得項目的子項目。

const childrenIds = apiRef.current.getItemOrderedChildrenIds(
  // The id of the item to retrieve the children from
  itemId,
);

API

請參閱以下文件，以取得此處提及之元件所有可用屬性和類別的完整參考。

• <RichTreeView />
• <TreeItem />