获取网格标题中的最后一个导航元素答案

【问题标题】：Getting last nav element in grid header获取网格标题中的最后一个导航元素
【发布时间】：2018-07-29 01:21:53
【问题描述】：

我有一个网格，当导航中的最后一个元素具有焦点时，我需要执行一个功能。但是，我无法让我的脚本找到行中的最后一个元素：

const cells = document.getElementsByClassName('ag-header-row');
[...cells].map(cell => {
  console.log(cells.length-1);
})

标题父标记：

<div class="ag-header-row" role="presentation" style="top: 0px; height: 32px; width: 800px;">

带有导航项标记：

<div class="ag-header-cell ag-header-cell-sortable" role="presentation" col-id="athlete" style="width: 200px; left: 0px;">

当用户箭头穿过标题并到达最后一个标题列时，我需要触发一个事件侦听器，它将焦点设置到下面数据网格主体中的第一个单元格。

Plnkr 链接：Link

更新

我添加了一个脚本，该脚本应该在标题单元格上查找 focus-visible 类，以及标题单元格是否是按键上的最后一个并将焦点设置到箭头上正文中的第一个单元格右键。但是，我收到了错误headerCells.addEventListener is not a function。我也不确定我是否有正确的逻辑设置来检查最后一个标题单元格和/或focus-visible 类。

const headerCells = document.getElementsByClassName('ag-header-cell');
const last_cell = headerCells[headerCells.length-1].attributes[2].value;
const hasFocusVisible = document.querySelector('.ag-header-cell-label').classList.contains('focus-visible');
console.log(hasFocusVisible);
[...headerCells].map(headerCell => {
  console.log(headerCell)
  headerCells.addEventListener("keydown", function(e) {
    if(e.key === "ArrowRight" && hasFocusVisible == true && last_cell) {
      //if last_cell and 'ag-header-cell-label' has 'focus-visible', set focus to first cell in body
      const bodyCell = document.getElementsByClassName('ag-cell')[0];
    }
  })
});

更新 Plnkr 链接：Updated link

【问题讨论】：

你拥有所有这些element.addEventListener 的东西。您是否有理由没有真正使用 ag-grid 的“键盘导航”功能？ ag-grid.com/javascript-grid-keyboard-navigation/…
@thirtydot - 它似乎不允许标题单元格之间的箭头键导航，也不允许使用箭头键从标题单元格访问正文单元格。
我已经浏览了你的最后一堆问题。这样做有什么意义？是出于可访问性的原因吗？顺便说一句，您是否考虑过用户更改列顺序或隐藏列的影响？你可能不能把所有这些代码都扔到onGridReady。
如果您查看 the ag-grid pipeline 并搜索“AG-1543”，您将看到“允许 tab 键浏览列标题中的元素”。这被标记为“复杂功能请求”。您基本上是在尝试破解一个难以实现的功能。要做到正确会真的很难。您可能希望将这个归档在“太难做，让我们等待 ag-grid 最终做到”类别下。如果您有 ag-grid-enterprise，您可以尝试向网格作者询问此功能请求。
是的，这是为了便于访问。目前 AG-Grid 积压了许多任务来做同样的事情，但我需要尽快添加这个功能。是的，我已经考虑过用户修改标头的影响（我需要以某种方式在 componentDidUpdate 中更新），但在不更新标头的情况下进行测试。

标签： javascript ag-grid

【解决方案1】：

如果您只需要查找特定选择器中的最后一个元素，请尝试以下操作：

var cells =document.querySelectorAll('.ag-header-row');
var last_cell = cells[cells.length-1];

【讨论】：

返回所有ag-header-cell的列表，而不是最后一个元素。
“cells”返回一个数组，但“last_cell”返回数组的最后一个元素。至少，它应该。
曾经出现过一次，但继续出现undefined。
如果你运行 console.log(cells.length) 并且它返回 0，那么选择器是错误的。我试图找到您的选择器，但在示例中它遇到了 iframe。