javascript - kendo grid - 使用箭头键导航和输入单元格

Question

我怎样才能实现以下目标，当按下箭头键时，它应该转到相应的单元格并输入单元格，这样用户就可以立即开始输入而不必先输入单元格，如果按下箭头键一个数字单元格，它应该忽略添加或减去数字的默认行为，而是转到下一行的上部或下部单元格。

编辑:

这是我想出的代码，但它有时只能工作，有时会跳过一两个单元格，有什么建议吗？

$(document).ready(function () {
    var grid = $("#grid").data("kendoGrid");
    $(grid.tbody).on("keydown", "td",function (e) {
        if (e.keyCode >= 37 && e.keyCode <= 40) {
            var row = $(this).closest("tr");
            var rowIndex = $("tr", grid.tbody).index(row);
            var colIndex = $("td", row).index(this);
            grid.closeCell();

            if (e.keyCode == 37) {//left
                colIndex--;
            }
            if (e.keyCode == 38) {//up
            rowIndex--;
            }
            if (e.keyCode == 39) {//right
                colIndex++
            }
            if (e.keyCode == 40) {//down
                rowIndex++
            }
            grid.editCell($("#grid tr:eq(" + rowIndex + ") td:eq(" + colIndex + ")"));
        }
    });
});

Answer 1

您的代码中有一个愚蠢的错误，导致它无法正常工作。你知道，Kendo 的网格实际上与两个表一起工作，一个用于表头，另一个用于正文。因此，如果您在选择器中指定正文表 tbody 元素(标题表没有该元素)，它将起作用:

grid.editCell($("#grid tbody tr:eq(" + rowIndex + ") td:eq(" + colIndex + ")"));
                       ^^^^^ // add here the 'tbody' element

Demo .

此外，我在末尾添加了一些逻辑，以便用户能够在导航时循环浏览行和单元格。

恕我直言，这个简单的功能应该在小部件中是原生的。