資料格 - 複製和貼上

使用剪貼簿複製和貼上資料。

剪貼簿複製

您可以使用 Ctrl+C 快捷鍵 (⌘ Command+C 在 macOS 上) 將選取的格線資料複製到剪貼簿。複製的儲存格值以 Tab 字元 (\t) 分隔，而列則以換行字元 (\n) 分隔。

複製到剪貼簿的資料優先順序如下，從最高到最低：

1. 如果選取了多個儲存格 (請參閱儲存格選取)，則會複製選取的儲存格
2. 如果選取了一或多列 (請參閱列選取)，則會複製選取的列
3. 如果只選取了一個儲存格，則會複製該單一儲存格

剪貼簿貼上

您可以使用 Ctrl+V 快捷鍵 (⌘ Command+V 在 macOS 上) 從剪貼簿貼上資料。貼上操作只會影響 editable 欄中的儲存格。

與編輯相同，您可以使用 valueParser 修改貼上的值，並使用 valueSetter 使用新值更新列。請參閱編輯文件的值解析器和值設定器章節，以取得更多詳細資訊。

剪貼簿貼上操作的行為取決於資料格的選取狀態和從剪貼簿貼上的資料。優先順序如下，從最高到最低：

1. 如果選取了多個儲存格 (請參閱儲存格選取)，則選取的儲存格會使用貼上的值更新。
2. 如果選取了一或多列 (請參閱列選取)，則選取的列會使用貼上的值更新。
3. 如果只選取了一個儲存格，則值會從選取的儲存格開始貼上。

停用剪貼簿貼上

若要停用剪貼簿貼上，請將 disableClipboardPaste 屬性設定為 true

持久化貼上的資料

剪貼簿貼上使用與編輯相同的 API 進行持久化 — 使用 processRowUpdate 屬性將更新後的列持久化到您的資料來源中

processRowUpdate?: (newRow: R, oldRow: R) => Promise<R> | R;

該列將會使用 processRowUpdate 回呼傳回的值進行更新。如果回呼拋出錯誤或傳回 rejected promise，則該列將不會更新。

以下示範展示如何在瀏覽器的 sessionStorage 中持久化貼上的資料。

事件

在剪貼簿貼上操作期間，會觸發以下事件：

• clipboardPasteStart - 在剪貼簿貼上操作開始時觸發
• clipboardPasteEnd - 在處理完剪貼簿貼上的所有列更新後觸發

為了方便起見，您也可以使用它們各自的屬性來監聽這些事件

• onClipboardPasteStart
• onClipboardPasteEnd

此外，還有 onBeforeClipboardPasteStart 屬性，它會在剪貼簿貼上操作開始之前呼叫，可用於取消或確認貼上操作

const onBeforeClipboardPasteStart = async () => {
  const confirmed = window.confirm('Are you sure you want to paste?');
  if (!confirmed) {
    throw new Error('Paste operation cancelled');
  }
};

<DataGridPremium onBeforeClipboardPasteStart={onBeforeClipboardPasteStart} />;

以下示範使用 Dialog 元件進行貼上確認。如果確認，資料格會在貼上操作期間顯示載入指示器。

剪貼簿資料的格式

預設情況下，剪貼簿複製和貼上操作使用以下格式：

• 儲存格值以 Tab 字元 (\t) 分隔。
• 列以換行字元 (\n) 分隔。

您可以使用 clipboardCopyCellDelimiter 和 splitClipboardPastedText 屬性來變更格式

<DataGridPremium
  {...otherProps}
  // support comma separated values
  clipboardCopyCellDelimiter={','}
  splitClipboardPastedText={(text) => text.split('\n').map((row) => row.split(','))}
/>

以下示範使用 , (逗號) 字元作為複製和貼上操作的儲存格分隔符號

API

• DataGrid
• DataGridPro
• DataGridPremium