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

Question

我在制作带有菜单的自定义单元格渲染器时遇到一些问题，该菜单一键式编辑所有行。

首先，我要渲染菜单图标，在用户单击显示的下拉菜单后，我选择了“编辑”选项（不必理会删除选项）。好的，所以我在列的定义中具有单元格的可视外观：

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
  }