Question

我正在努力实现AG-Grid中网格的标题和主体单元格之间的键盘导航。每个标题都有一个col-id，而该列中的每个单元格都具有相同的ID。我有一个脚本，该脚本将侦听keydown事件，并且如果标题上的e.key事件是ArrowDown，则它应查找标题的col-id，然后搜索关联列中第一个具有相同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();

¯\ _（ツ）_ /¯

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

1 个答案: