AG 网格:禁用编辑行,除非保存已编辑的行

Posted

技术标签:

【中文标题】AG 网格:禁用编辑行,除非保存已编辑的行【英文标题】:AG grid: Disable edit rows unless save the one whhich is edited 【发布时间】:2020-08-28 00:35:44 【问题描述】:

我有一个要求,一旦在 ag 网格中编辑了行,除非该行已保存,否则不应允许编辑其他行。

有什么方法可以实现吗?

我正在使用 onRowClick($event) 方法进行一些验证,示例如下:

 onRowClick(event: any) 
        if (this.cellChangeCount === 0) 
            this.UnsavedNodeIndex = event.node.rowIndex;
            this.UnsavedNodeID=event.data.ID;
            console.log(event.node);
        

        if (this.cellChangeCount !== 0 &&  (this.UnsavedNodeID!=event.data.ID )  && !this.newRowClicked) 

            if(typeof this.UnsavedNodeID !="undefined")
            this.alertService.info("Save data first.");

            this.onBtStartEditing();
            
        
        if(this.newRowClicked==true   &&  (this.UnsavedNodeID!=event.data.ID )  )
            this.gridApi.stopEditing();
            this.gridApi.setFocusedCell(0, 'ColName');
            this.gridApi.startEditingCell(
                rowIndex: 0,
                colKey: 'ColName',
            );
            this.gridApi.forEachNode(node=> node.rowIndex==0 ? node.setSelected(true) : node.setSelected(false))
        
        this.cellChangeCount++
    


 onBtStartEditing() 
        this.gridApi.stopEditing();
        this.gridApi.setFocusedCell(this.UnsavedNodeIndex, 'COlName');
        this.gridApi.startEditingCell(
            rowIndex: this.UnsavedNodeIndex,
            colKey: 'ColName',
        );
        this.gridApi.forEachNode(node=> node.rowIndex==this.UnsavedNodeIndex ? node.setSelected(true) : node.setSelected(false))
    

到目前为止,这正在工作,但如果有的话,我正在寻找一些强大的解决方案。 谢谢

【问题讨论】:

【参考方案1】:

您可以为列定义的“可编辑”属性指定一个返回布尔值(而不是指定布尔值)的函数。

每次用户尝试编辑单元格时,网格都会评估此函数。 如果函数返回 true,则继续编辑,如果返回 false,则单元格不会进入编辑模式。

因此,例如,如果您保留在进行编辑时设置的“脏”标志,并在保存时清除,则可以使用

editable: () => return !this.dirty

确保您使用上述“胖箭头功能”,否则可能无法正常工作。

【讨论】:

以上是关于AG 网格:禁用编辑行,除非保存已编辑的行的主要内容,如果未能解决你的问题,请参考以下文章

如何在单击按钮时使 ag 网格中的所有单元格可编辑

ExtJs 属性网格 - 选定的行可编辑?

react ag网格中的行删除后如何刷新网格

网格视图中的行编辑 C#

在可编辑数据网格 Flex 中禁用自动保存

如何在反应中实现 AG 网格行内的按钮