如何通过输入聚焦剑道网格中的下一个单元格

Question

我想在 Kendo Grid 中按回车键来选择下一个单元格。 我正在使用以下脚本：

 function onDataBound(e) {
        $("#batchgrid").on("focus", "td", function (e) {

            var rowIndex = $(this).parent().index();
            var cellIndex = $(this).index();
            $("input").on("keydown", function (event) {
                if (event.keyCode == 13) {
                    $("#batchgrid")
                    .data("kendoGrid")
                    .editCell($(".k-grid-content")
                    .find("table").find("tbody")
                    .find("tr:eq(" + rowIndex + ")")
                    .find("td:eq(" + cellIndex + ")")
                    .next()
                    .focusin($("#batchgrid")
                    .data("kendoGrid")
                    .closeCell($(".k-grid-content")
                    .find("table")
                    .find("tbody")
                    .find("tr:eq(" + rowIndex + ")")
                    .find("td:eq(" + cellIndex + ")")
                    .parent())));
                    return false;
                }
            });
        });
    }

这是我的jsfiddle。这段代码的问题是，当我按 Enter 键时，它将专注于下一个单元格，但之前的更改不会保留在屏幕上（最后一个单元格会以某种方式丢失更改）。 我知道这段代码有一个错误，我不知道错误在哪里。

Answer 1

实际上不需要使用数据绑定函数，而是可以使用简单明了的 keydown 或 keypress jQuery 函数。

看看下面的代码：-

<script>

$(document).ready(function(){

$("#batchgrid").keypress(function(e){

var keyCode = e.keyCode || e.which;
                if (keyCode == 13) {
                    var grid = $("#batchgrid").data("kendoGrid");
                    var curCell = grid.find(".k-edit-cell");
                    grid.editCell(curCell.next()); // To move the cursor to the next cell and put the cell in edit mode
                    grid.select(curCell.next()); // To select the next cell
                    grid.focus(curCell.next()); // To set focus on to next cell   
                    e.preventDefault(); // To prevent the default behavior of the enter key press
                }
});

});

</script>

Answer 2

看看这个JS FIDDLE link

我已将数据绑定事件修改如下。

     $("#list").on("focus", "td", function (e) {         
     $("input").on("keydown", function (event) {
         if (event.keyCode == 13) {
             setTimeout(function () {
                 var curCell = $("#list").find(".k-state-selected")
                 var eCell = $("#list").find(".k-edit-cell")

                 curCell.removeClass("k-state-selected");
                 curCell.removeClass("k-state-focused");
                 curCell.removeAttr("data-role");
                 curCell.next().addClass("k-state-selected");
                 curCell.next().addClass("k-state-focused");
                 try {                         $('#list').data('kendoGrid').closeCell(eCell);
                 } catch (ex) {
                 }
                 $('#list').data('kendoGrid').select();                     
                 $('#list').data('kendoGrid').editCell(curCell.next());

             }, 50);

         }
     });
 });
 }

Answer 3

如果您在 keydown 事件中注释掉 .data("kendogrid") 调用，您可以使用 tab 导航并使用 enter 编辑/关闭。您似乎正在重置焦点和模糊数据。

Answer 4

这段代码对我有用

$("#grid").on("focus", "td", function (e) {         
    $("input").on("keydown", function (event) {
        if (event.keyCode == 13) {
            setTimeout(function () {
                var grid = $("#grid").data("kendoGrid");
                var curCell  = $("#grid").find(".k-edit-cell");

                grid.editCell(curCell.next()); 

            });

        }
    });
});

希望对你有帮助