タブキーを使用してグリッドに入るには?
タブを宣言する 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