使用箭頭鍵的Kendo網格導航

Question

我試圖使用箭頭鍵在劍道網格中啟用導航。 我看到了一些示例，其中使用箭頭鍵僅在可編輯單元格之間導航。 我的劍道網格中有50多個列，其中20多個單元格是可編輯的。 我在數據綁定中創建了一個keydown事件，該事件僅對可編輯單元格有效。 如果我移至不可編輯的單元，則按鍵事件不起作用。
當前工作邏輯：
左右箭頭鍵僅在“可編輯”單元格內起作用。 一旦我們到達不可編輯的單元，它就無法工作。
所需的工作邏輯
當我們按箭頭鍵（如果該單元格是可編輯的）時，它將進入編輯模式；如果該單元格不可編輯，則焦點應保持不變；當我們按向左/向右箭頭鍵時，光標應移至上一個/下一個單元格。

我創建了一個telerik dojo 。
更新此Dojo在IE中按預期工作。 但是在chrome中，它不起作用。 基本上， Right arrow key應該像TAB鍵一樣工作，而Left Arrow key應該像SHIFT+TAB Left Arrow key一樣工作

Answer 1

即使沒有特別推薦，但是在“制表”時如何跳過不可編輯的單元格呢？

您將在網格中的表上綁定keydown事件。 它可以調用如下函數：

function onGridKeydown(e){
  if (e.keyCode === kendo.keys.TAB) {
    var grid = $(this).closest("[data-role=grid]").data("kendoGrid");
    var current = grid.current();
    if (!current.hasClass("editable-cell")) {
      var nextCell = current.nextAll(".editable-cell");
      if (!nextCell[0]) {
        //search the next row
        var nextRow = current.parent().next();
        var nextCell = current.parent().next().children(".editable-cell:first"); 
      } 
      grid.current(nextCell);
      grid.editCell(nextCell[0])
    }
  } 
};

當然，這僅解決了關於找到下一個所需小區的部分問題。 這個答案可能會引導您朝正確的方向發展（對不起，您沒有使用dojo項目）。

Answer 2

最后，我們可以通過為單元格提供tabIndex來解決此問題。 基本問題是TR和TD不會觸發按鍵事件。 在為TD設置TABINDEX之后，我們按下的事件將被觸發，其余過程將繼續進行。 我已經更新了Telerik Dojo
注意：我們刪除了用於數字輸入的微調器，因此按向上/向下箭頭時的值將不會更改。