豐富樹狀檢視 - 選取

處理使用者如何選取項目。

單選

預設情況下，「樹狀檢視」允許選取單個項目。

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

<RichTreeView items={MUI_X_PRODUCTS} />

<RichTreeView items={MUI_X_PRODUCTS} />

按下 Enter 開始編輯

多選

使用 multiSelect 屬性來啟用多選。

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

<RichTreeView multiSelect items={MUI_X_PRODUCTS} />

<RichTreeView multiSelect items={MUI_X_PRODUCTS} />

按下 Enter 開始編輯

停用選取

如果您不希望項目可選取，請使用 disableSelection 屬性

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

<RichTreeView disableSelection items={MUI_X_PRODUCTS} />

<RichTreeView disableSelection items={MUI_X_PRODUCTS} />

按下 Enter 開始編輯

核取方塊選取

若要啟用核取方塊選取，請設定 checkboxSelection={true}

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

<RichTreeView checkboxSelection items={MUI_X_PRODUCTS} />

<RichTreeView checkboxSelection items={MUI_X_PRODUCTS} />

按下 Enter 開始編輯

這也與多選相容

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

<RichTreeView multiSelect checkboxSelection items={MUI_X_PRODUCTS} />

<RichTreeView multiSelect checkboxSelection items={MUI_X_PRODUCTS} />

按下 Enter 開始編輯

受控選取

使用 selectedItems 屬性來控制選取的項目。

您可以使用 onSelectedItemsChange 屬性來監聽選取項目中的變更，並據此更新屬性。

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

<div>
  <Button onClick={handleSelectClick}>
    {selectedItems.length === 0 ? 'Select all' : 'Unselect all'}
  </Button>
</div>
<Box sx={{ minHeight: 352, minWidth: 250 }}>
  <RichTreeView
    items={MUI_X_PRODUCTS}
    selectedItems={selectedItems}
    onSelectedItemsChange={handleSelectedItemsChange}
    multiSelect
  />
</Box>

<div>
  <Button onClick={handleSelectClick}>
    {selectedItems.length === 0 ? 'Select all' : 'Unselect all'}
  </Button>
</div>
<Box sx={{ minHeight: 352, minWidth: 250 }}>
  <RichTreeView
    items={MUI_X_PRODUCTS}
    selectedItems={selectedItems}
    onSelectedItemsChange={handleSelectedItemsChange}
    multiSelect
  />
</Box>

按下 Enter 開始編輯

追蹤項目選取變更

如果您想要對項目選取變更做出反應，請使用 onItemSelectionToggle 屬性

未記錄項目選取

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

<Typography>
  {lastSelectedItem == null
    ? 'No item selection recorded'
    : `Last selected item: ${lastSelectedItem}`}
</Typography>
<Box sx={{ minHeight: 352, minWidth: 300 }}>
  <RichTreeView
    items={MUI_X_PRODUCTS}
    onItemSelectionToggle={handleItemSelectionToggle}
  />
</Box>

<Typography>
  {lastSelectedItem == null
    ? 'No item selection recorded'
    : `Last selected item: ${lastSelectedItem}`}
</Typography>
<Box sx={{ minHeight: 352, minWidth: 300 }}>
  <RichTreeView
    items={MUI_X_PRODUCTS}
    onItemSelectionToggle={handleItemSelectionToggle}
  />
</Box>

按下 Enter 開始編輯

父項/子項選取關係

當某個項目的所有子項目都被選取時自動選取該項目，以及當父項目被選取時自動選取所有子項目。

如果您無法升級，您可以使用 selectedItems、onSelectedItemsChange 和 onItemSelectionToggle 屬性建立自己的自訂解決方案

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

<RichTreeView
  multiSelect
  checkboxSelection
  apiRef={apiRef}
  items={MUI_X_PRODUCTS}
  selectedItems={selectedItems}
  onSelectedItemsChange={handleSelectedItemsChange}
  onItemSelectionToggle={handleItemSelectionToggle}
/>

<RichTreeView
  multiSelect
  checkboxSelection
  apiRef={apiRef}
  items={MUI_X_PRODUCTS}
  selectedItems={selectedItems}
  onSelectedItemsChange={handleSelectedItemsChange}
  onItemSelectionToggle={handleItemSelectionToggle}
/>

按下 Enter 開始編輯

命令式 API

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

const apiRef = useTreeViewApiRef();

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

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

選取或取消選取項目

使用 selectItem API 方法來選取或取消選取項目

apiRef.current.selectItem({
  // The DOM event that triggered the change
  event,
  // The id of the item to select or deselect
  itemId,
  // If `true`, the other already selected items will remain selected
  // Otherwise, they will be deselected
  // This parameter is only relevant when `multiSelect` is `true`
  keepExistingSelection,
  // If `true` the item will be selected
  // If `false` the item will be deselected
  // If not defined, the item's new selection status will be the opposite of its current one
  shouldBeSelected,
});

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

當使用 multiSelect 時，您可以使用 keepExistingSelection 屬性來避免遺失已選取的項目

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

API

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