Data Grid - 編輯食譜

進階網格自訂食譜。

多行編輯

您可以讓欄位包含多行文字，並透過建立自訂編輯組件來編輯它們。

在下面的示範中，Bio 欄位由多行組成。若要持久儲存變更，請使用 Ctrl+Enter (或 macOS 上的 ⌘ Command+Enter)。

當列中的所有儲存格都處於編輯模式時，您可以透過比較欄位的值來驗證欄位。若要執行此操作，請先新增 preProcessEditCellProps，如驗證章節中所述。當回呼被呼叫時，它將會有一個額外的 otherFieldsProps 參數，其中包含同一列中其他欄位的 props。使用此參數來檢查目前欄位的值是否有效。返回修改後的 props，其中包含錯誤，就像您對儲存格編輯一樣。一旦至少有一個欄位的 error 屬性設定為真值，該列將不會退出編輯模式。

以下示範僅在已付款？欄位被選取時，才需要付款方式欄位的值

連結欄位

一個欄位的可用選項可能取決於另一個欄位的值。例如，如果使用 singleSelect 欄位，您可以提供一個函數給 valueOptions，根據另一個欄位中選取的值傳回相關選項，如下例所示。

const columns: GridColDef[] = [
  {
    field: 'account',
    type: 'singleSelect',
    valueOptions: ({ row }) => {
      if (!row) {
        // The row is not available when filtering this column
        return ['Sales', 'Investments', 'Ads', 'Taxes', 'Payroll', 'Utilities'];
      }

      return row.type === 'Income' // Gets the value of the "type" field
        ? ['Sales', 'Investments', 'Ads']
        : ['Taxes', 'Payroll', 'Utilities'];
    },
  },
];

上面的程式碼已足以根據 Type 欄位中選取的值，在 Account 欄位中顯示不同的選項。剩下的唯一任務是在類型變更後重設帳戶。這是必要的，因為先前選取的帳戶現在將不存在於選項中。為了解決這個問題，您可以建立一個自訂編輯組件，重複使用內建的組件，並將一個函數傳遞給 onValueChange prop。此函數應呼叫 apiRef.current.setEditCellValue 以重設另一個欄位的值。

const CustomTypeEditComponent = (props: GridEditSingleSelectCellProps) => {
  const apiRef = useGridApiContext();

  const handleValueChange = async () => {
    await apiRef.current.setEditCellValue({
      id: props.id,
      field: 'account',
      value: '',
    });
  };

  return <GridEditSingleSelectCell onValueChange={handleValueChange} {...props} />;
};

下面的示範結合了上面顯示的步驟。您可以透過變更 Type 欄位中任何儲存格的值來實驗它。Account 欄位會自動使用正確的選項更新。

呼叫 apiRef.current.setEditCellValue 會傳回一個必須等待的 promise。例如，如果使用 singleSelect 欄位類型，不等待將導致另一個欄位以不在選項中的 value 呈現。

const handleChange = async () => {
  await apiRef.current.setEditCellValue({
    id: props.id,
    field: 'account',
    value: '',
  });
};

類似的行為可以透過儲存格編輯來重現。不是使用 apiRef.current.setEditCellValue，而是必須更新 rows prop 或使用 apiRef.current.updateRows。請注意，onCellEditStart 和 onCellEditStop props 也必須用於還原變更的儲存格的值，以防使用者取消編輯。

單擊編輯

預設情況下，進入編輯模式的方式之一是雙擊儲存格。使用受控模式並監聽點擊事件，您也可以透過單擊進入編輯模式。以下示範實作了此行為。

批量編輯

Data Grid 編輯 API 公開了 processRowUpdate 回呼，它通常用於持久儲存每個列的編輯。您可以利用此回呼在本機批量處理編輯，然後選擇批量持久儲存或捨棄它們。

下面的示範將編輯和刪除的列儲存在 unsavedChangesRef 中。當使用者分別點擊儲存或捨棄按鈕時，這些變更會被儲存或捨棄。

使用商業功能

當使用 Data Grid Premium 時，批量編輯會自動應用於來自剪貼簿貼上的列更新，因為剪貼簿貼上使用 Editing API 進行持久儲存