Question

我在Angular中使用ag-grid，并使用了全行编辑。我想基于另一个字段禁用对一个字段的编辑，但是我希望在另一个字段的值更改时立即禁用/启用该字段（不要一次停止编辑）。

我在这里用一个简单的示例重新创建了方案：如果ID的值大于0，则启用Value字段，否则，禁用Value字段。

<div style="width: 200px;">
    <ag-grid-angular #agGrid style="height: 200px;" class="ag-theme-fresh" [gridOptions]="gridOptions">
    </ag-grid-angular>
</div>

@Component({
    selector: 'app-my-grid-application',
    templateUrl: './my-grid-application.component.html'
})
export class MyGridApplicationComponent {
    private gridOptions: GridOptions;

    constructor() {
        this.gridOptions = <GridOptions>{
          enableSorting: true,
          // enable filtering 
          enableFilter: true
        };
        this.gridOptions.columnDefs = [
            {
                headerName: "ID",
                field: "id",
                width: 100,
                editable: true
            },
            {
                headerName: "Value",
                field: "value",
                width: 100,
                editable: true
            },

        ];
        this.gridOptions.rowData = [
            {id: 5, value: 10},
            {id: 10, value: 15},
            {id: 15, value: 20}
        ]
        this.gridOptions.rowSelection='single';
        this.gridOptions.editType='fullRow';
    }
}

Here是我的问题的SlackBlitz。

我该如何实现？我一直沿用计算方法来获取ID的值，每次更改它总是得到保存的值，而不是刚刚输入的值。我还尝试了ag-grid提供的许多事件挂钩，例如rowValueChanged和rowEditingStopped，但是它们仅在您停止编辑后才被调用，而不是在某些更改时被调用。

Answer 1

您可以这样处理：

editable: (params)=>{return params.data["id"]>0}

但是这种情况不能像您期望的那样完美地工作（可编辑功能仅在edit-start事件上执行，而在编辑时将无法跟踪您的更改）

要完全处理您的要求，您必须创建自定义cellEditors以便在“实时”更改中进行验证

您可以检查this post以获得有关验证的更多信息

Ag-grid：动态启用/禁用单元格编辑（基于另一个字段）

1 个答案: