时间戳

首页 > 解决方案 > 如何聚焦到 AG-Grid 行组件以使用键盘导航

navigation - 如何聚焦到 AG-Grid 行组件以使用键盘导航

问题描述

如果我专注于 Ag-Grid 行以外的元素，则 Ag-Grid 的键盘导航不起作用。

为了解决这个问题，我需要在执行按钮单击后重新聚焦到 Ag-Grid 行元素。

我尝试了以下方法来关注 ag-grid 行但仍然无法正常工作

this.elElement.nativeElement.querySelectorAll('.ag-row').attr('tabindex', -1).focus();

在我执行按钮单击以使用 Ag-Grid 中的键盘导航后，我应该能够专注于 AG-Grid

标签： navigationkeyboardfocusag-grid

解决方案

setFocusedCell()您可以使用ag-grid 的 api聚焦一个单元格。

// scrolls to the first row
gridOptions.api.ensureIndexVisible(0);

// scrolls to the first column
var firstCol = gridOptions.columnApi.getAllDisplayedColumns()[0];
gridOptions.api.ensureColumnVisible(firstCol);

// sets focus into the first grid cell
gridOptions.api.setFocusedCell(0, firstCol);

在此处的文档中阅读更多信息 - https://www.ag-grid.com/javascript-grid-api/#navigation和https://www.ag-grid.com/javascript-grid-keyboard-navigation/

推荐阅读