使用 tab 键进入 ag-grid答案

【问题标题】：Entering ag-grid using the tab key使用 tab 键进入 ag-grid
【发布时间】：2016-05-11 17:46:37
【问题描述】：

如何使用tab键进入网格？

可以在声明标签的 html div 上设置 tabindex，但它只会关注整个 div。我想关注第一行的第一个单元格。

我个人想出了以下技巧，但我正在寻找更好的解决方案。欢迎任何外部库。

我的网格中只有一列和简单的行，因此应改进此代码以消除对所有列和/或具有多个级别的行的所有单元格的潜在关注。

在我的指令中

<div ag-grid="ctlr.gridOptions" class="ag-fresh" role="grid" tabindex="201" ng-focus="ctlr.onFocus()" id="myGrid"></div>

内部控制器

ctrl.onFocus = function()
{
    var rows = $('#myGrid .ag-row.ag-row-even.ag-row-level-0');
    var firstRow = rows[0];

    var firstColumnCells = $('#myGrid .ag-row.ag-row-even.ag-row-level-0 .ag-cell.cell-col-0');
    var firstCell = firstColumnCells[0];

    //remove potential focus on rows
    for (var i = 0; i < rows.length; i++) 
    {
        rows[i].classList.remove('ag-row-focus');
        rows[i].classList.add('ag-row-no-focus');
    }

    //remove potential focus on first column cells
    for (var j = 0; j < rows.length; j++)
    {
        firstColumnCells[j].classList.remove('ag-cell-focus');
        firstColumnCells[j].classList.add('ag-cell-no-focus');
    }

    //focus first row
    firstRow.classList.remove('ag-row-no-focus');
    firstRow.classList.add('ag-row-focus');

    //focus first cell
    firstCell.classList.remove('ag-cell-no-focus');
    firstCell.classList.add('ag-cell-focus');

    firstCell.focus();

};

github 上的现有问题：https://github.com/ceolter/ag-grid/issues/183

【问题讨论】：

标签： ag-grid

【解决方案1】：

使用指令对我来说感觉不那么老套了——在将 tabindex="0" 添加到网格 div 以使其获得键盘焦点后，我使用该指令将焦点从 div 移动到左上角的单元格：

function gridTab($window) {
    return {
        restrict : 'A',
         link : function(scope, element) {
            element.bind('focus', function() {
                if (scope.grid.rowData.length > 0) {
                    scope.grid.api.setFocusedCell(0,0);
                }
            });
        }
    };
}

【讨论】：