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

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

您的代码中有一个愚蠢的错误，导致它无法正常工作。 您知道，剑道的网格实际上与两张桌子一起工作，一个用于表头，另一个用于主体。 因此，如果您在选择器中指定主体的表tbody元素（标头表中没有该元素），它将起作用：

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

演示

另外，我在最后添加了一些逻辑，以使用户能够在导航时遍历行和单元格。

这是一个如此简单的功能，应该内置在控件IMHO中。