可操作设置自定义制表符顺序

Question

我有一个可操作的网格（HandsonTable），想限制导航仅到前两列（A，B）。因此，当用户从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

使用了上面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);          
      }
    }); 
});

Answer 2

我这样解决：

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. 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