handsontable 设置自定义选项卡顺序

Question

我有一个 handsontable 网格 (HandsonTable) 并且想限制导航仅前两列（A，B）。所以当用户从 A1 开始并且使用选项卡，它将导航到 B1、A2、B2、A3、B3 等，当它到达 table 的末尾时，返回到 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 提供的 link 并让它工作。使用 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
    }
}

在我的例子中，我有一个 table 2 列 x 7 行，我打算仅在第 1 列中从第 1 行（零索引）移动到第 6 行，返回到第 1 行.

handsontable 设置自定义选项卡顺序

handsontable set custom tab order

javascript

handsontable

我是这样解决的：

参考文献：