1

ag-grid有没有比 with更好的方法来验证一行valueSetter？

我可以通过它实现验证，但我不确定是否有更好的方法。

https://www.ag-grid.com/javascript-grid-value-setters/#properties-for-setters-and-parsers

我想验证行中的两个字段。DateFrom 和 DateUntil（它们不允许为 null，并且 DateFrom 必须低于 DateUntil）。

4

3 回答 3

5

有两种可能的验证处理方式：

第一：通过ValueSetter函数

和

二：通过自定义cellEditor组件

我建议最好在 custom 之间拆分逻辑components，但正如您所说，您需要验证它们之间的两个单元格值。

在这种情况下，从 UI 的角度来看，您可以尝试将它们组合在一个单元格中，并且仅通过一个组件即可轻松处理值。

于 2018-10-10T07:03:30.397 回答
5

您可以覆盖 valueSetter 并改为调用网格 api 事务更新。

这是一个伪代码，展示了如何实现这一点。

valueSetter: params => {
  validate(params.newValue, onSuccess, onFail);
  return false;
};

validate = (newvalue, success, fail) => {
  if (isValid(newValue)) {
    success();
  } else {
    fail();
  }
};

onSuccess = () => {
  // do transaction update to update the cell with the new value
};

onFail = () => {
  // update some meta data property that highlights the cell signalling that the value has failed to validate
};

这样您也可以进行异步验证。这是一个异步值设置器的真实示例，它具有成功、失败和验证处理程序，这些处理程序在验证完成时执行事务更新。

const asyncValidator = (
  newValue,
  validateFn,
  onWhileValidating,
  onSuccess,
  _onFail
) => {
  onWhileValidating();
  setTimeout(function() {
    if (validateFn(newValue)) {
      onSuccess();
    } else {
      _onFail();
    }
  }, 1000);
};

const _onWhileValidating = params => () => {
  let data = params.data;
  let field = params.colDef.field;

  data[field] = {
    ...data[field],
    isValidating: true
  };
  params.api.applyTransaction({ update: [data] });
};

const _onSuccess = params => () => {
  let data = params.data;
  let field = params.colDef.field;

  data[field] = {
    ...data[field],
    isValidating: false,
    lastValidation: true,
    value: params.newValue
  };
  params.api.applyTransaction({ update: [data] });
};

const _onFail = params => () => {
  let data = params.data;
  let field = params.colDef.field;

  data[field] = {
    ...data[field],
    isValidating: false,
    lastValidation: params.newValue
  };
  params.api.applyTransaction({ update: [data] });
};

const asyncValidateValueSetter = validateFn => params => {
  asyncValidator(
    params.newValue,
    validateFn,
    _onWhileValidating(params),
    _onSuccess(params),
    _onFail(params)
  );
  return false;
};

这是一个代码运行器示例，显示了这一点：https ://stackblitz.com/edit/async-validation-ag-grid-final

于 2020-11-18T11:48:58.987 回答
3

看看这两个片段，这些来自我们的内部知识库（客户可以访问）

在“A（必需）”列中编辑值时，您会看到它不允许您将其留空。如果您将其留空并返回编辑，它将被取消。

//Force Cell to require a value when finished editing

https://plnkr.co/edit/GFgb4v7P8YCW1PxJwGTx?p=preview

在此示例中，我们使用自定义单元格编辑器，该编辑器还将根据 6 个字符长度规则验证值。编辑时，如果修改的值超过 6 个字符，它会显示为红色，当您停止编辑该行时，该值将被重置，因此只有在该值有效的情况下才接受完整的编辑。

//Inline Validation while editing a cell

https://plnkr.co/edit/dAAU8yLMnR8dm4vNEa9T?p=preview

于 2018-10-12T14:08:31.183 回答