跳到内容
+

数据表格 - 复制和粘贴

使用剪贴板复制和粘贴数据。

剪贴板复制

您可以使用 Ctrl+C 快捷键（macOS 上为 ⌘ Command+C）将选定的表格数据复制到剪贴板。复制的单元格值以制表符 (\t) 分隔，行以换行符 (\n) 分隔。

复制到剪贴板的数据优先级如下，从高到低

  1. 如果选择了多个单元格（参见单元格选择），则复制选定的单元格
  2. 如果选择了一个或多个行（参见行选择），则复制选定的行
  3. 如果只选择了一个单元格，则复制该单元格

剪贴板粘贴

您可以使用 Ctrl+V 快捷键（macOS 上为 ⌘ Command+V）从剪贴板粘贴数据。粘贴操作仅影响 editable 列中的单元格。

与编辑一样，您可以使用 valueParser 修改粘贴的值，并使用 valueSetter 更新具有新值的行。有关更多详细信息，请参阅编辑文档的值解析器和值设置器部分。

剪贴板粘贴操作的行为取决于数据表格的选择状态和从剪贴板粘贴的数据。优先级如下，从高到低

  1. 如果选择了多个单元格（参见单元格选择），则选定的单元格将使用粘贴的值进行更新。
  2. 如果选择了一个或多个行（参见行选择），则选定的行将使用粘贴的值进行更新。
  3. 如果只选择了一个单元格，则从选定的单元格开始粘贴值。
按 Enter 开始编辑

禁用剪贴板粘贴

要禁用剪贴板粘贴，请将 disableClipboardPaste 属性设置为 true

按 Enter 开始编辑

持久化粘贴的数据

剪贴板粘贴使用与编辑相同的 API 进行持久化——使用 processRowUpdate 属性来持久化数据源中更新的行

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

该行将使用 processRowUpdate 回调返回的值进行更新。如果回调抛出错误或返回被拒绝的 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 组件进行粘贴确认。如果确认，数据表格将在粘贴操作期间显示加载指示器。

剪贴板数据格式

默认情况下，剪贴板复制和粘贴操作使用以下格式

  • 单元格值以制表符 (\t) 分隔。
  • 行以换行符 (\n) 分隔。

您可以使用 clipboardCopyCellDelimiter 和 splitClipboardPastedText 属性来更改格式

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

下面的演示使用了 ,（逗号）字符作为复制和粘贴操作的单元格分隔符

按 Enter 开始编辑

API