Question

我们在掌上电脑的底部有一个按钮。当用户选中最后一个单元格时，我们可以选择按钮而不是回绕到第一个单元格吗？

＆＃13;

var data = [
  ["", "Ford", "Volvo", "Toyota", "Honda"],
  ["2014", 10, 11, 12, 13],
  ["2015", 20, 11, 14, 13],
  ["2016", 30, 15, 12, 13]
];

var container = document.getElementById('example');
var hot = new Handsontable(container, {
  data: data,
  minSpareRows: 1,
  rowHeaders: true,
  colHeaders: true,
  autoWrapRow: true,
  autoWrapColumn: true
});

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/handsontable/0.14.1/handsontable.full.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handsontable/0.14.1/handsontable.full.js"></script>
<form>
  <div id='example'></div>
  <br />
  <input type="button" value="Save"></input>
</form>

＆＃13;

Answer 1

我要做的是捕获事件，在您的情况下.on('beforekeydown')，并检查tab键。如果按下，请使用hot.getSelected()检查热实例当前所在的单元格，如果它是最后一个单元格，请将焦点切换到所需的任何按钮。以下是代码的一些细节：

Handsontable.Dom.addEvent(containerTag, 'keydown', function(e) {
  // On Tab, go to external button if last cell
  if (e.keyCode === 9 && hotInstance) {
    e.stopPropagation();
    var selection = hotInstance.getSelected();
    var rowIndex = selection[0];
    var colIndex = selection[1];
    if (rowIndex == lastRow && colIndex == lastCol) {
       hotInstance.deselect();
       buttonJquerySelector.focus();
    }
  }
});

我还没有测试过这段代码，但这或多或少都是你应该尝试做的。

Answer 2

这是可在多个表上使用的修复程序。在容器内放置一个按钮，并添加一个类名，该类名使按钮位于视图的外部。在6.2.2中可以使用

Handsontable.hooks.add('beforeKeyDown', function (event) {
    // On Tab, go to external button if last cell
    if (event.keyCode !== 9) {
        return;
    }

    var sel = this.getSelected();
    var lastRow = this.countRows() - 1;
    var lastCol = this.countCols() - 1;

    if ((!event.shiftKey && sel[0][0] === lastRow && sel[0][1] === lastCol) || (event.shiftKey && sel[0][0] === 0 && sel[0][1] === 0)) {
        event.stopImmediatePropagation();

         var el = $(this.getInstance()).get(0).rootElement;
        // Focus the activator button first -> otherwise, if the user has not tabbed into the table, it wouldn't skip to the next form element
        var hotActivators = el.getElementsByTagName('button');
        if (hotActivators.length > 0) {
            hotActivators[0].focus();
        }

        this.unlisten();
        this.deselectCell();
    }
});

CSS：

.hotActivatorButton {
    position: fixed;
    bottom: 100%;
    right: 100%;
}

在handontable细胞外面的标签

2 个答案: