如何在材质UI数据网格上获取整体错误状态?

Question

我正在使用Material UI DataGrid组件来渲染EXCEL文件。每个 Excel 文件都有多个列名称并具有特定的类型。例如：

const columns = [
{
"field": "uwgroup",
"headerName": "Group",
"minWidth": 200,
"editable": true
},
{
"field": "Amazing column Name ",
"flex": 1,
"minWidth": 150,
"editable": true
},
{
"field": "Building TSI",
"type": 'number',
"flex": 1,
"minWidth": 150,
"editable": true
},
{
"field": "dev",
"flex": 1,
"minWidth": 150,
"editable": true
}
]

"名称Building TSI"列的类型为number。我正在使用cellClassName添加类名invalid，例如：

classnames({
invalid: !isPositiveNumber(params.value)
})

它工作正常并呈现类名并指示错误单元格。问题是，我想计算错误单元格的总数。原因是，如果任何单元格中没有错误，我们只允许将网格值保存到数据库中。

到目前为止，我已经尝试过的解决方案：

1. 为errorCount添加状态，并在添加类时递增errorCount。这会导致多次重新渲染并超出内存限制。
2. 我尝试使用document.getElementByClassNames('invalid')并检查其长度。它仅适用于渲染项。也就是说，如果 excel 文件超过 10 行，则对其进行分页。无效单元格计数仅针对当前呈现的页面完成。
3. 我试图使用preProcessEditCellProps道具来指示错误。但是，无论如何我都找不到获得总错误单元格计数。唯一能从这个道具中得到的就是不允许用户输入错误值的能力。
4. 我什至尝试使用localStorage.它与解决方案2具有完全相同的问题。

如果有人遇到类似的情况，我将不胜感激。获得整体错误单元格计数会很好，因此，我可以启用以禁用 SAVE 按钮。

我遇到的限制之一是 excel 文件很大，平均包含 30-40k 行和 25-40 列。为每个单元格添加状态的性能会降低。

提前感谢！

Answer 1

在列中具有另一个属性并在导出每个单元格/行之前引用它会有所帮助。

在此示例中，调用 equigibleForExport 函数，将列定义和实际数据作为参数，将给出一个布尔值，说明是否存在错误。也可以更改为计数错误。

const isInvalidBuildingTSI=(value)=>!isPositiveNumber(value);
const isPositiveNumber=(num)=>num>=0;
const eligibleForExport=(columns,data)=>{
return !(data.find(row=>columns.find(column=>row[column.field] 
&& typeof column["isValid"] === "function" && column["isValid"](row[column.field]))))
}
const columns = [
{
"field": "uwgroup",
"headerName": "Group",
"minWidth": 200,
"editable": true
},
{
"field": "Building TSI",
"type": 'number',
"flex": 1,
"minWidth": 150,
"editable": true,
"isValid" : isInvalidBuildingTSI,
"cellClassName":isInvalidBuildingTSI(param.value)?"invalid":""
}
];

Answer 2

如果初始数据始终有效，解决问题的简单方法是遵循有关客户端验证的 DataGrid 文档：

客户端验证

要验证单元格中的值，请先添加一个preProcessEditCellProps对列定义的回调 要验证的字段。调用后，验证提供的值 在params.props.value.然后，返回一个新的对象params.props，并且error属性设置为 true 或 false。如果error属性为 true，该值永远不会提交。

const columns: GridColDef[] = [
{
field: 'firstName',
preProcessEditCellProps: (params: GridEditCellPropsChangeParams) => {
const hasError = params.props.value.length < 3;
return { ...params.props, error: hasError };
},
},
];

对于您的方案，这将导致以下结果：

const columns = [
{
"field": "uwgroup",
"headerName": "Group",
"minWidth": 200,
"editable": true
},
{
"field": "Amazing column Name ",
"flex": 1,
"minWidth": 150,
"editable": true
},
{
"field": "Building TSI",
"type": 'number',
"flex": 1,
"minWidth": 150,
"editable": true,
preProcessEditCellProps(params) {
const invalid = !isPositiveNumber(params.props.value);
return { ...params.props, error: invalid };
}
},
{
"field": "dev",
"flex": 1,
"minWidth": 150,
"editable": true
}
]

与您目前拥有的有一个重要的区别。此验证仅影响编辑。因此，初始数据必须有效。优点是您不再需要使用classnames({ invalid: !isPositiveNumber(params.value) })并且始终可以启用保存按钮，因为可以假定所有提交的更改都是有效的。

如果初始数据可能无效，这可能不是您要查找的答案。