handsontable设置自定义标签顺序

Question

我有一个动态网格（HandsonTable），并希望限制导航 只到前两列（A，B）。所以当用户在A1和A1上启动时 使用选项卡，它将导航到B1，A2，B2，A3，B3等，当它到达表的末尾时，请备份到A1。

有办法做到这一点吗？

$(document).ready(function () {

  var container = document.getElementById('basic_example');

  var data = function () {
   return Handsontable.helper.createSpreadsheetData(100, 12);
  };

  var hot = new Handsontable(container, {
    data: data(),
    height: 400,
    colHeaders: true,
    rowHeaders: true,
    stretchH: 'all',
    columnSorting: true,
    contextMenu: true
  });

});

MY CODE

Answer 1

我这样解决了：

afterDocumentKeyDown: function (event) {
    // getSelected() returns [[startRow, startCol, endRow, endCol], ...]
    const startRow = this.getSelected()[0][0];

    if (event.key === "Tab") {
        const nextRow = startRow === 6 ? 1 : startRow + 1; // if the last row (6), returns to the first one
        this.selectCell(nextRow, 0); // needs to be col 0 because Tab already changes to the right col
    }
}

在我的情况下，我有一个表2列x 7行，我打算只从第1列（零索引）的第1列移到第6列，返回到第1行。

参考文献：

1. https://handsontable.com/docs/7.4.2/Hooks.html#event:afterDocumentKeyDown

2. https://forum.handsontable.com/t/keyboard-tab-key-doesnt-enter-into-handsontable/3490

Answer 2

使用上面的mpuraria提供的链接并使其正常工作。使用Tab键时，导航顺序仅限于前两列。 jsfiddle

$(document).ready(function () {

  var container = document.getElementById('basic_example');

  var data = function () {
   return Handsontable.helper.createSpreadsheetData(10, 9);
  };

  var hot = new Handsontable(container, {
    data: data(),
    height: 400,
    colHeaders: true,
    rowHeaders: true,
    stretchH: 'all',
    columnSorting: true,
    contextMenu: true
  });


  Handsontable.Dom.addEvent(document.body, 'keydown', function(e) {

      if (e.keyCode === 9) {  


        e.stopPropagation();
        var selection = hot.getSelected();
        var rowIndex = selection[0];
        var colIndex = selection[1];          

        //rowIndex++;
        colIndex++;


          if (colIndex > 1) {
              rowIndex++;
              colIndex = 0;

          }

          hot.selectCell(rowIndex,colIndex);          
      }
    }); 
});