Вход в ag-grid с помощью клавиши табуляции

Как войти в сетку с помощью клавиши табуляции?

Можно установить tabindex в html div, объявив вкладку, но он будет фокусироваться только на всем 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
person Ronan Quillevere    schedule 02.02.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Использование директивы кажется мне менее хакерским - после добавления 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);
                }
            });
        }
    };
}
person asfordmatt    schedule 15.02.2016