1

タブキーを使用してグリッドに入るには?

タブを宣言する html div に tabindex を設定することは可能ですが、div 全体にのみフォーカスします。最初の行の最初のセルに注目したいと思います。

個人的には、次のハックを思いつきましたが、より良い解決策を探しています。外部ライブラリは大歓迎です。

グリッドと単純な行に 1 つの列しかないため、このコードを改善して、すべての列および/または複数のレベルを持つ行のすべてのセルに潜在的なフォーカスを削除する必要があります。

私の指令の中で

<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

4

1 に答える 1