Question

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

 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。这个代码的问题是，当我点击输入时，它将聚焦于下一个单元格，但之前的更改将不会保留在屏幕上（最后一个单元格将以某种方式丢失更改）。我知道这个代码有一个错误，我无法弄清楚错误在哪里。

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（＆＃34; kendogrid＆＃34;），则可以使用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()); 

            });

        }
    });
});

我希望这会有所帮助

如何通过输入将下一个单元格集中在剑道网格中

4 个答案: