Question

我想使用 HandsOnTable （btw：优秀工具）进行表格数据输入，包含许多数字，因此需要数字键盘支持。这尤其意味着，ENTER键应该像TAB键一样，即当按下goto时，同一行或下一行的下一个单元格转到下一行的第一个单元格。

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键

发生这种情况

到目前为止，非常好 - 不幸的是我在行中还有复选框字段。在这里，行为是不同的：每个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();
    }
}

因此切换独立的复选框按下了哪个键，所以我看不到修改checkboxEditor的方法。它似乎是EditorManager的功能，决定TAB不会传递给编辑器，而是一个ENTER。编程无法访问EditorManager。 Handsontable docs将beforeKeyDown描述为影响EditorManager的唯一方法。但在这种情况下如何？

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

不是解决方案。自定义渲染器可能是个主意，因为onBeforeKeyDown函数处理SPACE，ENTER，DELETE，BACKSPACE。

所以我尝试了一种方法来通过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）

在里面 function checkboxRenderer（实例，TD，行，col，prop，value，cellProperties）{}
有 function 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);
    }
  }

干杯

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

1 个答案: