kendo网格-使用箭头键导航和输入单元格 [英] kendo grid - navigate and enter cells with arrow keys

问题描述

如何实现以下目的，当按下箭头键时，它应该转到当前的单元格并输入该单元格，这样用户就可以立即开始键入而不必先进入该单元格，并且如果按下了箭头键，一个数字单元格，它应该忽略加或减数字的默认行为，而应转到下一行的上或下单元格.

How can I achieve the following, when arrow keys are pressed it should go to the curresponding cell and enter the cell so the user can start typing right away without having to enter the cell first, and if the arrow keys are pressed in a numeric cell it should ignore the default behavior of adding or subtracting numbers and instead go to the upper or lower cell in the next row.

编辑:

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

Here is the code I came up with but it only works sometimes and sometimes it will skip a cell or two, any advice?

$(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 + ")"));
        }
    });
});

推荐答案

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

You have a silly mistake in your code which prevents it to work. You know, Kendo's grid actually works with two tables togheter, one for the header, other for the body. So if you specify in your selector the body's table tbody element(the header table doesn't haves that element), it will work:

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

演示.

此外，我在最后添加了一些逻辑，以便用户可以在导航时在行和单元格之间循环.

Also, I have added a little logic at the end to user be able to loop through rows and cell while navigating.

这是一个简单的功能，应该内置在小部件IMHO中.

It is such a simple feature which should be native in the widget, IMHO.

这篇关于kendo网格-使用箭头键导航和输入单元格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！