Handsontable 设置自定义标签顺序

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 列中从第 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