ag-grid：开始编辑树视图的 autoColumnDef

Question

我有一个使用 Angular 的<ag-grid>，我想做的一件事是，当您单击一个按钮向网格中添加一行时，我希望能够集中注意力并开始编辑该行的输入，然后那一栏

在文档中，我已经能够通过使用如下代码来处理我的应用程序中各种ag-grids 中的各种列：

this.gridApi.startEditingCell({
    rowIndex: 0,
    colKey: 'description'
});

但是在我的一个网格中的一种特殊情况下，我使用树和autoGroupColumnDef，如下所示：

<ag-grid-angular
        #agGrid
        style="width: 100%; height: 100%;"
        id="myGrid"
        class="ag-theme-balham"
        [modules]="modules"
        [columnDefs]="columnDefs"
        [rowData]="rowData"
        [treeData]="true"
        [getDataPath]="getDataPath"
        [defaultColDef]="defaultColDef"
        [frameworkComponents]="frameworkComponents"
        [groupDefaultExpanded]="groupDefaultExpanded"
        [autoGroupColumnDef]="autoGroupColumnDef"
        (gridReady)="onGridReady($event)"
        (cellValueChanged)="handleChanges($event)"
        (columnMoved)="handleColumnChanges($event)"
        [getRowNodeId]="getRowNodeId"
        [context]="this"
      ></ag-grid-angular>

然后在我的打字稿中，我在构造函数中定义了我的autoGroupColumnDef，如下所示：

this.autoGroupColumnDef = {
      editable: true,
      headerName: "Account #",
      field: "accountNum",
      filter: "agGroupCellRenderer",
      cellRendererParams: {
        suppressCount: true,
        innerRenderer: 'AccountNameColumnDisplayer',
      },
};

问题是当我尝试像这样运行代码时：

this.gridApi.startEditingCell({
    rowIndex: 0,
    colKey: 'accountNum'
});

我收到一条警告，上面写着ag-grid-community.cjs.js:27041 ag-Grid: no column found for accountNum

作为记录，我提供给this.rowData 的数据包括一个名为accountNum 的属性

这里是否有一些我没有注意到的简单事情或我做错了什么？我查看了整个 ag-grid 文档，但不知道如何解决这个问题。提前致谢！

Answer 1

首先，让我们弄清楚 colKey。 colKey 实际上并不直接与字段属性相关联。来自文档：

某些 API 方法采用具有类型的 Column Key（名为 colKey） 专栏 |细绳。这意味着您可以传递一个 Column 对象（即 您通过调用其他方法之一收到）或者您传入 列 ID（这是一个字符串）。列 ID 是 列定义。如果您不提供列 ID，则网格将 为您创建一个（首先尝试使用该字段，如果它是唯一的， 否则会生成一个ID）。

因此，colKey 要么是列对象本身，要么是您在列定义中设置的 colId、字段属性或随机字符串（按此顺序）。

您的第一反应可能是设置 autoGroupColumnDef 列的 colId 属性。可惜！根据我的经验，agGrid 向您抛出另一个曲线球，这也不起作用...为什么？

这是因为 agGrid 总是使 autoGroupColumnDef colId: ag-Grid-AutoColumn

TLDR：对 autoGroupColumnDef 列使用 colKey "ag-Grid-AutoColumn"！

干杯！

Answer 2

据我猜测，我认为您的 accountNum 字段不是 columnDefs 的一部分。

您无需在autoColumnGroupDef 中提供字段，而是将accountNum 提供给实际的columnDefs 类似的东西 -

  {
    field: 'accountNum',
    hide: true,
  }

幕后autoGroupColumnDefs 只不过是rowGroup=true 表示的列上的ag-grid 组单元格渲染器。

由于您的数据已经采用树格式，因此 ag-grid 负责分组。

来自文档 -

当网格使用树数据时，无需显式 指定一个列组，因为网格将使用自动列组。

网格生成的自动列使用 ag-Grid 提供的组 单元格渲染器。这意味着 gridOptions.autoGroupColumnDef 也可以 用于传递其他属性以进一步自定义您的 显示组。

更多详情here