handsontable 设置自定义 Tab 键顺序

Question

I have a handsontable grid ( HandsonTable ) and would like to limit navigation to only the first two columns (A,B). So when the user starts on A1 and uses tab it will navigate to B1, A2, B2, A3, B3 etc. and when it reaches the end of the table go backup to A1.

Is there a way to do this?

$(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

Used the link provided by mpuraria above and got it working. The navigation order has been restricted to the first two columns when using the tab key. 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

I solved this way:

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

In my case, I had a table 2 columns x 7 rows, and I have an intention to move only in column 1 from the row (zero-indexed) 1 to 6, returning to row 1.

References:

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