如何在 Kendo Grid 中的可编辑单元格之间添加自定义键盘导航

Question

作为this问答的延续：

如何为启用以下功能的 Kendo Grid 实现自定义按键处理程序：

1. 箭头键上下导航
2. 离开时单元格内容保存到网格中
3. 下一个单元格的编辑器已打开

Answer 1

我将使用在question in the Question、this question、kendo.grid.js 源代码和我自己的实验中找到的信息来回答我自己的问题。如果其他人有更好的解决方案，我会很乐意接受。

// add a handler for the keydown event within the grid cells
$("#grid").kendoGrid().table.on("keydown", "td", function(e) {
    var grid = $("#grid").kendoGrid();

    if (e.keyCode == 38 || e.keyCode == 40) {
        var current = $(this);
        var row = current.closest("tr");
        var rowIndex = $("tr", grid.tbody).index(row);
        var colIndex = $("td", row).index(this);

        if (e.keyCode == 38) {//up
            rowIndex--;
        }

        if (e.keyCode == 40) {//down
            rowIndex++
        }

        //handle wraparound. Negative indexing already counts from the end, so only this case is needed
        if (rowIndex >= grid.dataSource.view().length) {
            rowIndex = 0;
        }

        var nextCellSelector = "#bid-items-grid tbody tr:eq(" + rowIndex + ") td:eq(" + colIndex + ")";
        grid._handleEditing(current, $(nextCellSelector), current.closest("table"));

        // reusing the jQuery object doesn't work here because the grid redraws
        grid.editCell($(nextCellSelector));
    }
});

这开始很简单，您编写一个自定义 keydown 事件处理程序。您阅读密钥，确定您所在的单元格以及需要移动到的单元格，处理网格上的环绕案例。

第一个技巧是调用_handleEditing()。这是剑道网格用于处理编辑的内部函数。它的签名是_handleEditing: function(current, next, table)，将当前单元格、下一个单元格和表格本身作为输入。 注意： _ 方法是内部方法：它们不是为外部使用而设计的，并且不能保证在更新时保持不变。但我找不到实现这一目标的官方方法。谨慎使用。

这看起来会自动选择下一个单元格进行编辑，如果是这样，您可能会省略对grid.editCell()的调用。但是，根据我的经验，_handleEditing() 会导致网格重绘，从而导致 JQuery 对象与表格单元格元素分离。

这就是为什么调用 grid.editCell() 需要使用行和列位置的显式选择器，而不是仅仅将 JQuery 对象保存在变量中。

基于选项卡的导航可以以类似的方式实现，并且可以将方便的kendo.keys.TAB 定义与 keyCode 进行比较以提高可读性。此外，借助 Tab 支持，您需要放弃浏览器默认的选项卡行为，即尝试跳转到下一个输入：

e.preventDefault();
e.stopPropagation();