Ag-Grid 双击单元格时防止树展开/折叠

Question

我的网格中有一些代码，我试图阻止双击事件导致树行展开/折叠，但我无法在任何地方找到如何执行此操作的文档。我想这样做的原因是，当我双击单元格时，我想让它可编辑，但由于一些技术上的需要，我需要在发生折叠/展开时运行gridApi.redrawRows()，这会导致编辑字段失去焦点，这意味着我永远无法通过双击实际编辑单元格。

我正在使用以下 ag-grid 模块版本

"ag-grid-angular": "^22.1.1",
"ag-grid-community": "^22.1.1",
"ag-grid-enterprise": "^22.1.1"

我的网格中的相关html看起来像这样

<ag-grid-angular
        #agGrid
        class="ag-theme-balham"
        [modules]="modules"
        [columnDefs]="columnDefs"
        [rowData]="rowData"
        [treeData]="true"
        (rowGroupOpened)="onRowGroupOpened($event)"
        (cellDoubleClicked)="handleCellDoubleClicked($event)"
        [getDataPath]="getDataPath"
        [defaultColDef]="defaultColDef"
        [frameworkComponents]="frameworkComponents"
        [autoGroupColumnDef]="autoGroupColumnDef"
        (gridReady)="onGridReady($event)"
        [getRowNodeId]="getRowNodeId"

      >
</ag-grid-angular>

在我的组件文件中，负责将行自动分组为树形格式的特定列如下所示

ngOnInit() {
   this.autoGroupColumnDef = {
      editable: this.isAllowedtoEdit,
      headerName: "Account #",
      sortable: true,
      lockPosition: true,
      resizable: true,
      field: "accountNum",
      filter: "agGroupCellRenderer",
      cellRendererParams: {
        suppressCount: true,
        innerRenderer: 'AccountNameColumnDisplayer',
      },
    };
}

处理双击单元格的函数是这样的：

handleCellDoubleClicked(cell) {
    if(cell.column.colDef.field === 'accountNum') {
      cell.event.stopPropagation();
      return false;
    }
  }

我的handleCellDoubleClicked() 函数似乎没有做任何事情。它运行但当我双击时该行仍然展开/折叠。

我什至尝试这样做只是为了看看它会做什么，它会导致一些非常奇怪的行为发生

handleCellDoubleClicked(cell) {
    if(cell.column.colDef.field === 'accountNum') {
      cell.node.setExpanded(false)
    }
  }

最后，当我尝试专注于

handleCellDoubleClicked(cell) {
    if(cell.column.colDef.field === 'accountNum') {
      setTimeout(() => {
         this.gridApi.startEditingCell({
           rowIndex: node.rowIndex,
           colKey: 'accountNum'
         });
      }, 125);
    }
  }

我在控制台中收到警告，告诉我 ag-grid 无法识别列 accountNum

所以我现在有点不知所措。有什么我可以做的吗？提前致谢！

Answer 1

您应该能够将以下属性添加到您的 cellRendererParams 以实现此目的：

cellRendererParams: {
        ...yourOtherParams,
        suppressDoubleClickExpand: true
    }

干杯！