AG Grid:验证行的更好方法 - valueSetter?
AG Grid: Better way for validation row - valueSetter?
是否有比 valueSetter
更好的方法来验证 ag-grid
中的行?
我可以通过它实现验证,但我不确定是否有更好的方法。
https://www.ag-grid.com/javascript-grid-value-setters/#properties-for-setters-and-parsers
我想验证行中的两个字段。 DateFrom 和 DateUntil(不允许为 null,DateFrom 必须小于 DateUntil)。
有两种可能的验证处理方式:
首先:通过ValueSetter
函数
和
第二:通过自定义 cellEditor
组件
我建议最好在自定义 components
之间拆分逻辑,但正如您所说,您需要在它们之间验证两个单元格值。
在这种情况下,从 UI 的角度来看,您可以尝试将它们组合在一个单元格中,并且仅通过一个组件来处理值会很容易。
看看这两个片段,它们来自我们的内部知识库(客户可以访问)
编辑 'A (Required)' 列中的值时,您会发现它不允许您将其留空。如果将其留空并 return 编辑,它将被取消。
//Force Cell to require a value when finished editing
https://plnkr.co/edit/GFgb4v7P8YCW1PxJwGTx?p=preview
在此示例中,我们使用自定义单元格编辑器,该编辑器还将根据 6 个字符长度规则验证值。编辑时,如果值被修改超过6个字符,它会显示为红色,当你停止编辑该行时,该值将被重置,所以只有在值有效的情况下才接受完整的编辑。
//Inline Validation while editing a cell
您可以覆盖 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
};
这样你也可以进行异步验证。
这是一个异步值 setter 的真实示例,它具有成功、失败以及验证完成时执行事务更新的处理程序。
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
是否有比 valueSetter
更好的方法来验证 ag-grid
中的行?
我可以通过它实现验证,但我不确定是否有更好的方法。
https://www.ag-grid.com/javascript-grid-value-setters/#properties-for-setters-and-parsers
我想验证行中的两个字段。 DateFrom 和 DateUntil(不允许为 null,DateFrom 必须小于 DateUntil)。
有两种可能的验证处理方式:
首先:通过ValueSetter
函数
和
第二:通过自定义 cellEditor
组件
我建议最好在自定义 components
之间拆分逻辑,但正如您所说,您需要在它们之间验证两个单元格值。
在这种情况下,从 UI 的角度来看,您可以尝试将它们组合在一个单元格中,并且仅通过一个组件来处理值会很容易。
看看这两个片段,它们来自我们的内部知识库(客户可以访问)
编辑 'A (Required)' 列中的值时,您会发现它不允许您将其留空。如果将其留空并 return 编辑,它将被取消。
//Force Cell to require a value when finished editing
https://plnkr.co/edit/GFgb4v7P8YCW1PxJwGTx?p=preview
在此示例中,我们使用自定义单元格编辑器,该编辑器还将根据 6 个字符长度规则验证值。编辑时,如果值被修改超过6个字符,它会显示为红色,当你停止编辑该行时,该值将被重置,所以只有在值有效的情况下才接受完整的编辑。
//Inline Validation while editing a cell
您可以覆盖 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
};
这样你也可以进行异步验证。 这是一个异步值 setter 的真实示例,它具有成功、失败以及验证完成时执行事务更新的处理程序。
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