jquery之如何通过按 Enter 键聚焦剑道网格中的下一个单元格

<button class="k-button" id="batchGrid"> 
    Batch Edit</button> 
<div id="example" class="k-content"> 
    <div id="batchgrid"> 
    </div> 
</div> 
<script> 
    $("#batchGrid").click(function () { 
        var crudServiceBaseUrl = "http://demos.kendoui.com/service", 
                        dataSource = new kendo.data.DataSource({ 
                            transport: { 
                                read: { 
                                    url: crudServiceBaseUrl + "/Products", 
                                    dataType: "jsonp" 
                                }, 
                                update: { 
                                    url: crudServiceBaseUrl + "/Products/Update", 
                                    dataType: "jsonp" 
                                }, 
                                destroy: { 
                                    url: crudServiceBaseUrl + "/Products/Destroy", 
                                    dataType: "jsonp" 
                                }, 
                                create: { 
                                    url: crudServiceBaseUrl + "/Products/Create", 
                                    dataType: "jsonp" 
                                }, 
                                parameterMap: function (options, operation) { 
                                    if (operation !== "read" && options.models) { 
                                        return { models: kendo.stringify(options.models) }; 
                                    } 
                                } 
                            }, 
                            batch: true, 
                            pageSize: 20, 
                            schema: { 
                                model: { 
                                    id: "ProductID", 
                                    fields: { 
                                        ProductID: { editable: false, nullable: true }, 
                                        ProductName: { validation: { required: true} }, 
                                        UnitPrice: { type: "number", validation: { required: true, min: 1} }, 
                                        Discontinued: { type: "boolean" }, 
                                        UnitsInStock: { type: "number", validation: { min: 0, required: true} } 
                                    } 
                                } 
                            } 
                        }); 
 
        $("#batchgrid").kendoGrid({ 
            dataSource: dataSource, 
            dataBound: onDataBound, 
            navigatable: true, 
            filterable: true, 
            pageable: true, 
            height: 430, 
            width: 300, 
            toolbar: ["create", "save", "cancel"], 
            columns: [ 
                            "ProductName", 
                            { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "130px" }, 
                            { field: "UnitsInStock", title: "Units In Stock", width: "130px" }, 
                            { field: "Discontinued", width: "130px" }, 
            //                            { field: "", title: "No", template: "#= ++record #", width: "30px" }, 
                            {command: ["destroy"], title: "&nbsp;", width: "100px"}], 
            editable: true 
        }); 
    }); 
</script> 
<script> 
    function onDataBound(e) { 
        var grid = $("#batchgrid").data("kendoGrid"); 
        $(grid.tbody).on("keydown", "td", function (e) { 
            if ((e.keyCode ? e.keyCode : e.which) == 13) { //Enter keycode 
                var row = $(this).closest("tr"); 
                var rowIdx = $("tr", grid.tbody).index(row); 
                var colIdx = $("td", row).index(this); 
                alert(rowIdx + '-' + colIdx); 
 
                $this.closest('tr').next().find('td').eq(index).focus(); 
                e.preventDefault(); 
            } 
        }); 
    } 
</script> 

在这里，当我在编辑模式下按 Enter 键(插入新记录)时，我需要转到下一个单元格(就像按 tab 键)。

如果我在任何行的最后一个单元格(最后一列)中按回车键，它应该移动到下一行的第一个单元格(第一列)。

我认为问题出在我的脚本中。但不知 Prop 体出在哪里。

请在这里帮助我..

请您参考如下方法:

试试这个代码:-

<script> 
 
$(document).ready(function(){ 
 
$("#KendoGridName").keypress(function(e){ 
 
var keyCode = e.keyCode || e.which; 
                if (keyCode == 13) { 
                    var grid = $("#KendoGridName").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> 

注意:- 除了 keypress function(e) 之外，您还可以使用 keydown function(e){}。

如果代码无法运行或存在缺陷，请提出您的意见。我在 MVC5 中尝试过这个，它与 Kendo Grid 一起工作。