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

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

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

Demo

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

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

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

1 个答案: