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

【问题标题】：Angular ag-Grid: custom cell renderer that turns on edit mode over all editable cells in rowAngular ag-Grid：自定义单元格渲染器，可在行中所有可编辑单元格上打开编辑模式
【发布时间】：2020-09-24 18:29:59
【问题描述】：

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

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

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 时）？

【问题讨论】：

您关于编辑模式的问题不清楚。我建议要么对其进行编辑，要么将其拆分为单独的问题
@PratikBhat 我想完全实现与默认 fullRow 编辑模式相同的功能，但在按钮（我在 customCellRenderer 中渲染）上单击：ag-grid.com/javascript-grid-cell-editing/… 并且该按钮仅使他的行可编辑
更新了编辑模式的答案（）

标签： javascript angular ag-grid ag-grid-angular

【解决方案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'});
}

【讨论】：