'Shift + Enter'键导航将焦点设置为Angular 9中ag-Grid的可编辑列中的两个单元格答案

【问题标题】：'Shift+Enter' keys navigation sets focus to two cells in the editable column of ag-Grid in Angular 9'Shift + Enter'键导航将焦点设置为Angular 9中ag-Grid的可编辑列中的两个单元格
【发布时间】：2020-09-17 21:07:15
【问题描述】：

我正在使用带有名为“成本”的可编辑列的 ag-Grid。要求如下：

如果用户在此列的任何单元格中编辑值并按“Enter”键，焦点应移动到同一列中的下方单元格并将其变为编辑模式（我能够毫无问题地实现这一点)
如果用户在此列的任何单元格中编辑值并按“Shift + Enter”键，焦点应移动到同一列中的上方单元格并将其转换为编辑模式

在“Shift + Enter”场景中，焦点移动到上方的单元格并将其变为编辑模式，但焦点也设置为同一列中下方两行的单元格，即该列中的两个单元格现在具有焦点，一个处于编辑模式（我需要这个），一个处于非编辑模式（我不应该有这个），如下图所示

html文件中的代码是：

<ag-grid-angular
   #agGrid
   style="width:100%; height:100vh"
   id="myGrid"
   class="ag-theme-balham-dark"
   [columnDefs]="columnDefs"
   [defaultColDef]="defaultColDef"
   [singleClickEdit]="true"
   [enterMovesDown]="true"
   [enterMovesDownAfterEdit]="true"
   [autoGroupColumnDef]="autoGroupColumnDef"
   [treeData]="true"
   [rowData]="rowData"
   [groupDefaultExpanded]="groupDefaultExpanded"
   [getDataPath]="getDataPath"
   (cellValueChanged)="onCellValueChanged($event)"
   (keyup)="onKeyUp($event)"
   (gridReady)="onGridReady($event)"
   >
</ag-grid-angular>

我为此使用'keyup'事件，组件文件中'onKeyUp'函数内的代码是：

onKeyUp(e) {
  if(e.key === 'Enter') {
    if(e.shiftKey) {
      this.gridApi.startEditingCell({
        rowIndex: (this.gridApi.getFocusedCell().rowIndex - 2),
        colKey: this.gridApi.getFocusedCell().column.colId
      });
    }
    else {
      this.gridApi.startEditingCell({
        rowIndex: this.gridApi.getFocusedCell().rowIndex,
        colKey: this.gridApi.getFocusedCell().column.colId
      });
    }
  }
}

我想摆脱在编辑模式下将焦点设置到实际单元格下方两行的单元格，如图所示。请帮我解决这个问题。

【问题讨论】：

标签： angular ag-grid keyup ag-grid-angular

【解决方案1】：

我终于能够解决这个问题。找到当前行的“rowIndex”和“colKey”，然后使用 clearFocusedCell() 清除非必需的焦点，然后将所需的单元格转换为编辑模式。

onKeyUp(e) {
 if(e.key === 'Enter') {
  if(e.shiftKey) {
     var rowIndex = this.gridApi.getFocusedCell().rowIndex;  <-- Added line 
     var colKey = this.gridApi.getFocusedCell().column.colId  <-- Added line
     this.gridApi.clearFocusedCell();  <-- Added line

     this.gridApi.startEditingCell({
       rowIndex: (rowIndex - 2),
       colKey: colKey
     });
  }
  else {
     this.gridApi.startEditingCell({
       rowIndex: this.gridApi.getFocusedCell().rowIndex,
       colKey: this.gridApi.getFocusedCell().column.colId
     });
  }
 }
}

【讨论】：