使用箭头键的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
注意：我们删除了用于数字输入的微调器，因此按向上/向下箭头时的值将不会更改。