Angular ag-Grid：自定义单元格渲染器，可在行中的所有可编辑单元格上打开编辑模式

Question

我在制作带有菜单的自定义单元格渲染器时遇到了一些问题，只需单击一下即可编辑所有行。

首先我想呈现菜单图标，在用户单击下拉菜单时显示 select 'edit' 选项（不要为删除选项而烦恼）。好的，所以我在列的定义中有单元格的视觉方面：

columnsDefinition.push({
  headerName: '',
  cellRendererFramework: EditRendererComponent,
  cellRendererParams: {
    // params will be here
  }
});

好的，让我们进入下一步。我需要一些额外的参数，我知道如何传递组件的静态参数，但我还需要来自渲染我的单元格的行的数据——我不知道如何将它传递给自定义渲染器组件。

这是我的 EditRendererComponent：

export class EditRendererComponent implements ICellRendererAngularComp {
  isEditing = false;
  params: any;

  agInit(params: ICellRendererParams) {
this.params = params;
  }

  refresh(params: any): boolean {
return false;
  }

editMode() {
// we need to loop thru all rows, find the column with the renderer, and 'cancel the edit mode'.
// otherwise, we will end up with rows that has SAVE buttons appearing but not in edit mode
const renderersInOtherRows = this.params.api.getCellRendererInstances(this.params);

if( renderersInOtherRows && renderersInOtherRows.length > 0 ) {
  for(const wrapper of renderersInOtherRows) {
    if (wrapper.getFrameworkComponentInstance() instanceof EditRendererComponent ) {
      const foundRenderer = wrapper.getFrameworkComponentInstance() as EditRendererComponent;
      if( foundRenderer.isEditing ) {
        foundRenderer.onCancel();
      }
    }
  }
}
this.isEditing = true;
this.params.api.startEditingCell( { rowIndex: this.params.node.rowIndex, colKey: 'some-col-field-name'});
}

onCancel() {
this.isEditing = false;
// restore previous data or reload
}
onSave() {
this.isEditing = false;
// do your saving logic
}
}

总结，我需要帮助：

1) 将记录数据传递给渲染器组件

2) editMode() 方法根本不起作用，有什么想法应该如何解决以使所有单元格都可编辑（仅当列 def editable 设置为 true 时）？

Answer 1

您不需要通过 cellRendererParams 传递数据。在单元格渲染器组件中，您可以使用参数访问行数据。

  agInit(params: any): void {
    this.params = params;
    data = params.data // access row data here
  }

如果您从文档中查看这个 example，您需要实现与示例类似的按钮点击。您在代码中使用它的方式应该可以解决问题。

您只需将 [suppressClickEdit] = true 添加到您的 gridOption 中，这样编辑只能通过单击按钮激活。并且您通过将 rowIndex 传递给 startEditing api.

来确保只有当前行处于活动状态以进行编辑

你的 editMode() 我假设是在点击编辑按钮时调用的，应该非常简单，就像这样 -

editMode() {
this.params.api.startEditingCell( { rowIndex: this.params.node.rowIndex, colKey: 'some-col-field-name'});
}

Angular ag-Grid：自定义单元格渲染器，可在行中的所有可编辑单元格上打开编辑模式

Angular ag-Grid: custom cell renderer that turns on edit mode over all editable cells in row

javascript

ag-grid

angular

ag-grid-angular