跳到主要內容
+

簡易樹狀檢視 - 選取

了解如何為樹狀檢視元件啟用項目選取功能。

單選

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

多選

使用 multiSelect 屬性來啟用多選功能。

停用選取

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

核取方塊選取

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

這也與多選功能相容

受控選取

使用 selectedItems 屬性來控制選取的樹狀檢視項目。您也可以使用 onSelectedItemsChange 屬性來監聽選取項目的變更,並相應地更新該屬性。

追蹤項目選取變更

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

沒有項目選取記錄

命令式 API

選取或取消選取項目

使用 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,
});
  • 資料網格
    • @mui/x-data-grid
    • @mui/x-data-grid-pro
    • @mui/x-data-grid-premium

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

  • 資料網格
    • @mui/x-data-grid
    • @mui/x-data-grid-pro
    • @mui/x-data-grid-premium

API

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