如何获取 Material UI DataGrid 的总体错误状态?

Sur*_*iya 8 javascript material-ui mui-x

我正在使用 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
    }
]
Run Code Online (Sandbox Code Playgroud)

列 Name 的Building TSI类型为number。我invalid使用添加类名cellClassName,例如:

classnames({
   invalid: !isPositiveNumber(params.value)
})
Run Code Online (Sandbox Code Playgroud)

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

解决方案,我到目前为止已经尝试过:

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

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

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

提前致谢!

小智 0

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

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

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":""
    }
];
Run Code Online (Sandbox Code Playgroud)