Jquery 如何通过按enter键聚焦剑道网格中的下一个单元格 批量编辑 $（“#batchGrid”）。单击（函数（）{ var crudServiceBaseUrl=”http://demos.kendoui.com/service", dataSource=新建kendo.data.dataSource({ 运输：{ 阅读：{ url:crudServiceBaseUrl+“/Products”， 数据类型：“jsonp” }, 更新：{ url:crudServiceBaseUrl+“/Products/Update”， 数据类型：“jsonp” }, 销毁：{ url:crudServiceBaseUrl+“/Products/Destroy”， 数据类型：“jsonp” }, 创建：{ url:crudServiceBaseUrl+“/Products/Create”， 数据类型：“jsonp” }, parameterMap：功能（选项、操作）{ if（操作！=“读取”&&options.models）{ 返回{models:kendo.stringify（options.models）}； } } }, 批次：对， 页面大小：20， 模式：{ 型号：{ id:“产品id”， 字段：{ ProductID:{可编辑：false，可空：true}， 产品名称：{验证：{必需：true}}， 单价：{type:“number”，验证：{required:true，min:1}， 中止：{type:“boolean”}， UnitsInStock:{type:“number”，验证：{min:0，必需：true} } } } }); $（“#batchgrid”）.kendoGrid({ 数据源：数据源， 数据绑定：onDataBound， 可导航：是的， 可过滤：正确， pageable:对， 身高：430， 宽度：300， 工具栏：[“创建”、“保存”、“取消”]， 栏目：[ “产品名称”， {字段：“单价”，标题：“单价”，格式：“{0:c}”，宽度：“130px”}， {字段：“单位库存”，标题：“库存单位”，宽度：“130px”}， {字段：“中断”，宽度：“130px”}， //{字段：，标题：“否”，模板：“#=++记录#”，宽度：“30px”}， {命令：[“销毁”]，标题：“”，宽度：“100px”}]， 可编辑：真 }); }); 函数onDataBound（e）{ var grid=$（“#batchgrid”）.data（“kendoGrid”）； $（grid.tbody）.on（“向下键”，“td”，函数（e）{ 如果（（e.keyCode？e.keyCode:e.which）==13）{//输入keyCode var行=$（此）.tr； var rowIdx=$（“tr”，grid.tbody）.index（行）； var colIdx=$（“td”，行）。索引（此）； 警报（rowIdx+'-'+colIdx）； $this.closest（'tr'）.next（）.find（'td'）.eq（index.focus（）； e、 预防默认值（）； } }); }

在这里，当我在编辑模式下按enter键（插入新记录）时，我需要进入下一个单元格（就像我按了制表键一样）

如果我在任何行的最后一个单元格（最后一列）中按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键的同时移动下一个单元格

    $('.k-edit-field .k-input').on('keypress', function (e) {
   if(event.keyCode == 13)                
                $('.k-edit-field .k-input').next().focus(); //This statement will be used where you want to provide focus
});

请尝试以下代码：-

  $(document).ready(function () {
            $("#batchGrid").on("click", "td", function (e) {
                var rowIndex = $(this).parent().index();
                var cellIndex = $(this).index();
                window.onkeydown = 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())));

$（文档）.ready（函数（）{
$（“#KendoGridName”）。按键（功能（e）{
var keyCode=e.keyCode | | e.which；
如果（键代码==13）{
var grid=$（“#KendoGridName”）.data（“kendoGrid”）；
var curCell=grid.find（“.k-edit-cell”）；
grid.editCell（curCell.next（））；//将光标移动到下一个单元格并将该单元格置于编辑模式
grid.select（curCell.next（））；//选择下一个单元格
grid.focus（curCell.next（））；//将焦点设置为下一个单元格
e、 preventDefault（）；//要防止enter键的默认行为，请按
}
});
});

注意：-除了按键功能（e），您还可以使用按键功能（e）{}

---

如果代码不工作或有一些缺陷，请传递您的评论。我在MVC5中尝试过这个，它与剑道格网一起工作。

这已经晚了一年，但也许有人可以从中得到一些东西。我有一张进入Telerik的票，他们的回答是，切换到下一个可编辑单元格是有意的。不能接受

我需要从一个可编辑的单元格转到另一个单元格，忽略不可编辑的单元格，所以我是这样做的：

这并不漂亮，因为我混合了硬编码的单元格索引，理想情况下，我希望使用css属性在单元格之间导航（下一个版本）

无论如何，这是一个好的开始

你也可以试试这个

<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>

}))

参考测试代码：

---

请注意，我应该在哪里应用此代码。在另一个脚本中或在我的脚本中

$("#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()); 

        });

    }
});

  $("#GridID").keypress(function (e) {
            if (e.keyCode === 13) {
                e.preventDefault();
            }
        });