ag-grid自定义弹出编辑器-允许在不退出的情况下使用TAB

// 自定义编辑器组件
class CustomEditorComponent {
  constructor() {
    this.eInput = document.createElement('input');
    this.eInput.addEventListener('keydown', this.onKeyDown.bind(this));
  }

  getGui() {
    return this.eInput;
  }

  getValue() {
    return this.eInput.value;
  }

  onKeyDown(event) {
    if (event.key === 'Tab') {
      event.preventDefault();

      const nextCellPosition = this.getNextCellPosition();
      const gridApi = this.params.api;

      gridApi.startEditingCell({
        rowIndex: nextCellPosition.rowIndex,
        colKey: nextCellPosition.colKey,
      });
    }
  }

  getNextCellPosition() {
    const currentCell = this.params.cellStartedEdit;
    const currentRowIndex = currentCell.rowIndex;
    const currentColKey = currentCell.column.getColId();

    // 根据当前位置信息计算下一个单元格的位置
    // ...

    return {
      rowIndex: nextRowIndex,
      colKey: nextColKey,
    };
  }
}

// 在列定义中配置编辑器
const columnDefs = [
  {
    headerName: 'Column 1',
    field: 'col1',
    cellEditor: 'customEditorComponent',
  },
  // 其他列定义...
];

// 创建ag-grid实例
const gridOptions = {
  columnDefs: columnDefs,
  components: {
    customEditorComponent: CustomEditorComponent,
  },
  // 其他配置项...
};

new agGrid.Grid(document.querySelector('#myGrid'), gridOptions);