使用箭头键将焦点设置在网格列的第一个单元格上

Question

我正在努力实现 AG-Grid 中网格的 header 和 body 单元格之间的键盘导航。每个 header 都有一个 col-id，而列中的每个单元格都有相同的 ID。我有一个脚本可以侦听 keydown 事件，如果 e.key 事件是 ArrowDown 而在 header 上，它应该寻找 col-id 的 header，并搜索具有相同 col-id 的关联列中的第一个单元格，然后将焦点设置到具有 focus() 的单元格。

我有以下内容，但它只注销了列 col-id，并没有在按下

键时获取对下方数据单元格的引用

document.addEventListener("keydown", function(e) {
  if(e.key === "ArrowRight") {
    let headerId = document.activeElement.parentElement.parentElement.getAttribute("col-id");
    console.log('header id: ', headerId);
  }
  else if(e.key === "ArrowDown"){
    //get column id on arrowdown
    let headerId = document.activeElement.parentElement.parentElement.getAttribute("col-id");
    console.log('header id: ', headerId);
    //look for first child in first row with same id as header and set focus
    document.querySelector('.ag-cell').focus();
  }
  else if(e.key === "ArrowUp") {
    //store value of grid cell column id
    let cellId = document.activeElement.getAttribute("col-id");
    console.log('header id arrow up: ', cellId);
    //set focus to column header
    document.querySelector('.ag-header-cell[col-id="' + cellId + '"]').focus();
  }
});

当前状态：Link

Answer 1

要在按下向下箭头时聚焦关联列中的第一个单元格：

document.querySelector('.ag-cell[col-id="' + headerId + '"]').focus();

¯\_(ツ)_/¯

使用箭头键将焦点设置在网格列的第一个单元格上

Setting focus on first cell of grid column with arrow keys

javascript

event-listener

ag-grid