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

时间:2020-05-12 08:32:20

标签: angular angular8 ag-grid ag-grid-validation

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

有什么办法可以实现?

我正在使用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 个答案:

答案 0 :(得分:1)

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

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

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

editable: () => return !this.dirty

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