Handsontable - 如何禁用复选框中的 ENTER 键

Question

我想使用 HandsOnTable（顺便说一句：优秀的工具）进行表格数据输入，有很多数字，因此需要数字键盘支持。这尤其意味着，ENTER 键的行为应该像 TAB 键一样，即当按下时转到同一行中的下一个单元格或在行尾转到下一行的第一个单元格。

autoWrapRow: true

使用 TAB 键让这一切轻松实现

enterMoves: function () {
    var maxCol = hot.getCellMeta(0, 0).columns.length-1
    if(hot.getSelected()[1] >= maxCol) {
        return {row: 1, col: -maxCol}
    } else {
        return {row: 0, col: 1}
    }
}

通过 ENTER 键实现这一点

到目前为止，一切都很好 - 不幸的是，我在行中还有 checkbox 字段。 在这里，行为是不同的： 每个 ENTER 都会切换复选框，但不会关闭单元格并移动。 所以数据条目会一直挂在复选框中，直到被 TAB 或鼠标点击移动。

我试图解决这个问题：

beforeKeyDown: function (e) {
    var sel = hot.getSelected();
    var typ = hot.getCellMeta(sel[0], sel[1]).type;
    if (e.keyCode === 13 && typ == 'checkbox') {
        e.stopImmediatePropagation();
    }
}

但这不起作用，即与没有 beforeKeyDown 函数的行为相同。

另见jsFiddle

在handsontable.full.js (0.20.2) 7070 行内只有

beginEditing: function() {
    var checkbox = this.TD.querySelector('input[type="checkbox"]');
    if (!hasClass(checkbox, 'htBadValue')) {
        checkbox.click();
    }
}

所以切换复选框独立于按下哪个键，所以我看不到修改复选框编辑器的方法。 它似乎是 EditorManager 功能，决定不将 TAB 传递给编辑器，而是将 ENTER 传递给编辑器。 EditorManager 不可用于编程。 Handsontable 文档将 beforeKeyDown 描述为影响 EditorManager 的唯一方法。但是在这种情况下怎么办？

    cbEditor = hot.getCellEditor(sel[0], sel[1]);
    cbEditor.prototype.close();
//  or
    cbEditor.prototype.discardEditor();

不是解决方案。自定义渲染器可能是一个想法，因为有处理 SPACE、ENTER、DELETE、BACKSPACE 的函数 onBeforeKeyDown。

所以我尝试了一种通过 selectCell 的方法：

    beforeKeyDown: function(e) {
      var sel = hot.getSelected();
      var typ = hot.getCellMeta(sel[0], sel[1]).type;
      if (e.keyCode === 13 && typ == 'checkbox') {
//        e.stopImmediatePropagation();
//        seams to be not necessary - no effect
        var row = sel[0];
        var col = sel[1] + 1;
        if (col >= hot.getCellMeta(0, 0).columns.length) {
          row += 1;
          col = 0;
        }
        hot.selectCell(row, col);
      }
    }

到目前为止，这可行，有点脏（实现了两次换行），但仍然有一个小错误： 如果复选框在最后一列并且该行中没有输入任何内容，则 ENTER 切换但移动到下一行。

jsFiddle下的更多内容

如果有任何进一步的想法，我将不胜感激......

Answer 1

有点晚了，但解决方法是修改源
handsontable.full.js (0.25.1)

函数 checkboxRenderer(instance, TD, row, col, prop, value, cellProperties) {}
有
函数 onBeforeKeyDown(event){}

这样修改

  function onBeforeKeyDown(event) {
    // **Original** var allowedKeys = [KEY_CODES.SPACE, KEY_CODES.ENTER, KEY_CODES.DELETE, KEY_CODES.BACKSPACE];
    var allowedKeys = [KEY_CODES.SPACE, KEY_CODES.DELETE, KEY_CODES.BACKSPACE];
    if (allowedKeys.indexOf(event.keyCode) !== -1 && !isImmediatePropagationStopped(event)) {
      eachSelectedCheckboxCell(function() {
        stopImmediatePropagation(event);
        event.preventDefault();
      });
    }
    // **Original** if (event.keyCode === KEY_CODES.SPACE || event.keyCode === KEY_CODES.ENTER) {
    if (event.keyCode === KEY_CODES.SPACE ) {
      toggleSelected();
    }
    if (event.keyCode === KEY_CODES.DELETE || event.keyCode === KEY_CODES.BACKSPACE) {
      toggleSelected(false);
    }
  }  

干杯