Angular Grid Ag-Grid，使列可动态编辑答案

【问题标题】：Angular Grid Ag-Grid, make Column Editable dynamicallyAngular Grid Ag-Grid，使列可动态编辑
【发布时间】：2018-10-24 18:46:07
【问题描述】：

嗯，标题看起来和其他帖子很相似：

Angular Grid ag-grid columnDefs Dynamically change

AG-Grid: Make editable columns based on response from server

但我要问一个稍微不同的问题。

现在我有一堆列存储在 tableColumns 变量中。

每一列都有一个可编辑的属性。

对于现有数据，有些列是可编辑的，有些则不是。这是通过以下功能实现的。当我定义 columnDefs 时调用它。

checkEditable(columnName: string){
        var editable = false;
        this.configData.some((el) => {
          if (columnName == el.key.columnName){
            return el.editable == "Y";
          }
        });
        return editable;
      }

但是，对于附加在我的网格底部的新插入行，我希望所有列仅可编辑此记录。

此记录可以通过列 isChanged = "inserted" 来识别。

insertNewRow(){
    var newItem = this.createNewRowData();
    var res = this.gridOptions.api.updateRowData({add: [newItem]});

    var updatedColDefs = [];

    **//how can I update columnDefs here, so that all fields are editable for this record?**

    var col = this.gridOptions.api.setColumnDefs(updatedColDefs);

  }

  createNewRowData(){
    var newData = [];
    this.tableColumns.forEach(item => {
      if (item.headerName == "isChanged") {
        newData["isChanged"] = "inserted";
      } else {
      newData[item.headerName] = "";
      }
    });

    console.log(newData);
    return newData;
  }

很可能我必须创建一个函数来实现这一点，但似乎我无法将函数分配给列的“可编辑”属性？什么是正确的语法？

【问题讨论】：

标签： angular ag-grid

【解决方案1】：

这不是你的语法，而是方法。

以下方法对您有用。

为所有列设置可编辑的true。
对于要插入的新行，有一个标志来指定新插入的记录。你已经有了newData["isChanged"] = "inserted"
使用(cellEditingStarted)="onCellEditingStarted($event)"事件检查当前正在编辑的记录是否为newly inserted记录。
- 如果是，则使其可编辑
- 如果不是，则检查当前列是否可编辑。

检查此代码

 onCellEditingStarted($event) {
    if($event.data.isChanged != 'inserted' && $event.colDef.editable != true)
    // check property is used at column level to identify editable or not in above statement
        this.gridApi.stopEditing();
}

供参考（不完全是你想要的，但你会明白的）：how to disable editing for only some rows in ag grid

【讨论】：