数据表格 - 编辑技巧

高级表格自定义技巧。

多行编辑

你可以创建包含多行文本的列，并通过创建自定义编辑组件来编辑它们。

在下面的演示中，“Bio”列由多行组成。要保存更改，请使用 Ctrl+Enter 组合键 (macOS 上为 ⌘ Command+Enter)。

当一行中的所有单元格都处于编辑模式时，你可以通过比较字段值来验证它们。为此，首先添加 preProcessEditCellProps，如验证部分所述。当回调被调用时，它将有一个额外的 otherFieldsProps 参数，其中包含同一行中其他字段的 props。使用此参数检查当前列的值是否有效。返回包含错误的修改后的 props，就像单元格编辑一样。一旦至少有一个字段的 error 属性设置为真值，该行将不会退出编辑模式。

以下演示仅在选中“Is paid?”列时才需要“Payment method”列的值

关联字段

一个字段的可用选项可能取决于另一个字段的值。例如，如果使用 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 属性。此函数应调用 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 属性或使用 apiRef.current.updateRows。请注意，onCellEditStart 和 onCellEditStop 属性也必须用于还原已更改单元格的值，以防用户取消编辑。

单次点击编辑

默认情况下，进入编辑模式的方式之一是双击单元格。使用受控模式并监听点击事件，你也可以通过单击一次进入编辑模式。以下演示实现了此行为。

批量编辑

Data Grid Editing API 公开了 processRowUpdate 回调，通常用于按行持久化编辑。你可以利用此回调在本地批量编辑，然后选择批量持久化或放弃它们。

下面的演示将编辑和删除的行存储在 unsavedChangesRef 中。当用户分别单击“保存”或“放弃”按钮时，这些更改将被保存或放弃。

使用商业功能

当使用 Data Grid Premium 时，批量编辑自动应用于来自剪贴板粘贴的行更新，因为剪贴板粘贴使用 Editing API 进行持久化