Angular Grid Ag-Grid，使列可动态编辑 [英] Angular Grid Ag-Grid, make Column Editable dynamically

问题描述

好吧，标题看起来与其他帖子非常相似：

Well, the title looks quite similar to other posts:

角度网格ag-grid columnDefs动态更改

AG-Grid：根据服务器的响应创建可编辑的列

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

but I'm going to ask a slightly different question.

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

Now I have a bunch of columns stored in tableColumns variable.

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

Each column has a editable property.

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

For existing data, some columns are editable and some are not. This is achieved by below function. It is called when I define columnDefs.

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

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

However, for newly inserted rows which got appended at the bottom of my grid, I want all columns to be editable for this record only.

此记录可以通过isChanged列=插入来标识。

This record can be identified by column 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;
  }

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

Most likely I will have to create a function to achieve this, but seems like I am unable to assign function to 'editable' property of the column? What would be the correct syntax?

推荐答案

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

It's not your syntax, but the approach.

下面

1. 使所有列的 true 可编辑。


2. 对于要插入的新行，有一个标志来指定该记录是新插入的。您已经拥有 newData [ isChanged] =插入


3. 使用（cellEditingStarted）= onCellEditingStarted（$ event） 事件，用于检查当前编辑记录是否是新插入的记录。
   
   
   
   
   • 如果是，则使其可编辑
   
   
   • 如果不是，则检查当前列是否可编辑或不。
   
   

1. Make editable true for all columns.
2. For new rows you are inserting, have a flag to specify that the record is newly inserted. You already have that as newData["isChanged"] = "inserted"
3. Use (cellEditingStarted)="onCellEditingStarted($event)" event to check whether the currently editing record is newly inserted record or not.
   • If it is, then make it editable
   • If its not, then check if the current column is editable or not.

检查此代码

 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();
}

供参考（不完全是您想要的，但您会明白的） ：如何仅对ag网格中的某些行禁用编辑功能

For reference (not exact what you want, but you'll get idea): how to disable editing for only some rows in ag grid

这篇关于Angular Grid Ag-Grid，使列可动态编辑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！