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

Question

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

Можно установить tabindex на html div, объявляющем вкладку, но он будет фокусировать весь div. Я хотел бы сосредоточиться на первой ячейке первой строки.

Personaly Я придумал следующий хак, но я ищу лучшее решение. Любая внешняя библиотека приветствуется.

У меня есть только один столбец в моей сетке и простых строках, поэтому этот код следует улучшить, чтобы удалить потенциальный фокус на все ячейки для всех столбцов и/или для строк с более чем одним уровнем.

Внутри моей директивы

<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

Answer 1

Использование директивы чувствует себя менее Hacky ко мне - после добавления TabIndex = "0" в grid 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); 
       } 
      }); 
     } 
    }; 
}