Handsontable - 如何在複選框中禁用ENTER鍵

我想使用HandsOnTable（順便說一句：優秀的工具）表格數據輸入，許多數字，所以因此需要數字鍵盤支持。特別是，這意味着ENTER鍵應該像TAB鍵那樣工作，即當按下時轉到同一行中的下一個單元格或行末尾轉到下一行的第一個單元格。Handsontable - 如何在複選框中禁用ENTER鍵

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(); 
    } 
}

所以切換獨立的複選框哪個鍵被按下，所以我認爲沒有辦法修改複選框編輯器。它似乎是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

我將不勝感激任何進一步的想法下...

來源

2016-01-07 RanneR

有點晚了，但是，一到workround這是修改源
handsontable.full.js（0.25。1）

裏面
功能checkboxRenderer（例如，TD，行，列，丙，值，cellProperties）{}
存在
功能onBeforeKeyDown（事件）{ }

修改，像這樣

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

乾杯

來源

2016-06-14 22:49:30 Greeny

嗨，感謝這個好主意，我會嘗試實現這一點，一旦應用程序的下一次更改到期。 – RanneR

我期待這樣的補丁，但沒有訣竅在哪裏挖，以及如何確保不要摧毀別的東西。不幸的是，源代碼中的這種補丁會導致額外的更改和測試工作，以防發佈更改。再次感謝。 – RanneR

@Ranner NP，同意，修補源代碼很少是理想的解決方案。希望它會在某個時候改變上游。對於用戶而言，複選框與Enter鍵的行爲差別很大。 – Greeny

Handsontable - 如何在複選框中禁用ENTER鍵

回答

相關問題