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

Question

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

我正在使用以下 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
    }

干杯!