javascript - 如何在 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() 的调用。这是kendo grid用来处理编辑的内部函数。它的签名是_handleEditing: function(current, next, table)，将当前单元格、下一个单元格和表格本身作为输入。 注意: _ 方法是内部方法:它们并非设计用于外部使用，并且不保证在更新期间保持不变。但我找不到实现这一目标的官方方法。谨慎使用。

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

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

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

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