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

Question

我在使用菜单制作自定义单元格渲染器时遇到一些问题，以便一键编辑所有行。

首先，我想渲染菜单图标，在用户单击下拉菜单时显示，我 select '编辑'选项（不要担心删除选项）。 好的，所以我在列的定义中有单元格的视觉方面：

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

好的，让 go 进入下一步。 我需要一些额外的参数，我知道如何传递组件的 static 参数，但我还需要渲染单元格的行中的数据 - 我不知道如何将其传递给自定义渲染器组件。

这是我的 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()方法根本不起作用，有什么想法应该如何解决以使所有单元格都可编辑（仅当columns def editable设置为true时）？

Answer 1

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

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

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

您只需将[suppressClickEdit] = true添加到您的gridOption ，以便仅通过单击按钮激活编辑。 并且您通过将rowIndex传递给startEditing api 来确保只有当前行处于活动状态以进行编辑。

我假设在单击编辑按钮时调用的editMode()应该非常简单，如下所示 -

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