Handsontable - как отключить клавишу ВВОД в флажке

Я хочу использовать 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 переключает флажок, но не закрывает ячейку и не перемещается. Таким образом, запись данных висит в флажке, пока не будет перемещена с помощью 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) есть только

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

так что переключение флажка не зависит от того, какая клавиша была нажата, поэтому я не вижу способа изменить checkboxEditor. Кажется, это функциональность EditorManager, решающая, что TAB не передается в редактор, а ENTER. EditorManager не доступен для программирования. Handsontable документы описывают 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

Буду признателен за любые дальнейшие идеи...

1 ответ

Немного поздно, но, чтобы обойти это, нужно изменить источник
handsontable.full.js (0.25.1)

Внутри
function checkboxRenderer(instance, TD, row, 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);
    }
  }  

ура

Другие вопросы по тегам