豐富樹狀檢視 - 展開

處理使用者如何展開項目。

受控展開

使用 `expandedItems` 屬性來控制展開的項目。

您可以使用 `onExpandedItemsChange` 屬性來監聽展開項目的變更，並相應地更新屬性。

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

<div>
  <Button onClick={handleExpandClick}>
    {expandedItems.length === 0 ? 'Expand all' : 'Collapse all'}
  </Button>
</div>
<Box sx={{ minHeight: 352, minWidth: 250 }}>
  <RichTreeView
    items={MUI_X_PRODUCTS}
    expandedItems={expandedItems}
    onExpandedItemsChange={handleExpandedItemsChange}
  />
</Box>

<div>
  <Button onClick={handleExpandClick}>
    {expandedItems.length === 0 ? 'Expand all' : 'Collapse all'}
  </Button>
</div>
<Box sx={{ minHeight: 352, minWidth: 250 }}>
  <RichTreeView
    items={MUI_X_PRODUCTS}
    expandedItems={expandedItems}
    onExpandedItemsChange={handleExpandedItemsChange}
  />
</Box>

按下 Enter 開始編輯

追蹤項目展開變更

如果您想要對項目展開變更做出反應，請使用 `onItemExpansionToggle` 屬性

沒有記錄到動作

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

{action == null ? (
  <Typography>No action recorded</Typography>
) : (
  <Typography>
    Last action: {action.isExpanded ? 'expand' : 'collapse'} {action.itemId}
  </Typography>
)}
<Box sx={{ minHeight: 352, minWidth: 250 }}>
  <RichTreeView
    items={MUI_X_PRODUCTS}
    onItemExpansionToggle={handleItemExpansionToggle}
  />
</Box>

{action == null ? (
  <Typography>No action recorded</Typography>
) : (
  <Typography>
    Last action: {action.isExpanded ? 'expand' : 'collapse'} {action.itemId}
  </Typography>
)}
<Box sx={{ minHeight: 352, minWidth: 250 }}>
  <RichTreeView
    items={MUI_X_PRODUCTS}
    onItemExpansionToggle={handleItemExpansionToggle}
  />
</Box>

按下 Enter 開始編輯

限制展開到圖示容器

您可以使用 `expansionTrigger` 屬性來決定是否應該透過點擊圖示容器而不是整個樹狀項目內容來觸發展開互動。

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

<RichTreeView items={MUI_X_PRODUCTS} expansionTrigger="iconContainer" />

<RichTreeView items={MUI_X_PRODUCTS} expansionTrigger="iconContainer" />

按下 Enter 開始編輯

命令式 API

要使用 `apiRef` 物件，您需要使用 `useTreeViewApiRef` Hook 初始化它，如下所示

const apiRef = useTreeViewApiRef();

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

當您的組件首次渲染時，`apiRef` 將會是 `undefined`。在此初始渲染之後，`apiRef` 會持有以命令方式與樹狀檢視互動的方法。

變更項目展開

使用 `setItemExpansion` API 方法來變更項目的展開。

apiRef.current.setItemExpansion(
  // The DOM event that triggered the change
  event,
  // The id of the item to expand or collapse
  itemId,
  // If `true` the item will be expanded
  // If `false` the item will be collapsed
  isExpanded,
);

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

<Stack spacing={2} direction="row">
  <Button onClick={handleExpandClick}>Expand Data Grid</Button>
  <Button onClick={handleCollapseClick}>Collapse Data Grid</Button>
</Stack>
<Box sx={{ minHeight: 352, minWidth: 250 }}>
  <RichTreeView items={MUI_X_PRODUCTS} apiRef={apiRef} />
</Box>

<Stack spacing={2} direction="row">
  <Button onClick={handleExpandClick}>Expand Data Grid</Button>
  <Button onClick={handleCollapseClick}>Collapse Data Grid</Button>
</Stack>
<Box sx={{ minHeight: 352, minWidth: 250 }}>
  <RichTreeView items={MUI_X_PRODUCTS} apiRef={apiRef} />
</Box>

按下 Enter 開始編輯

API

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