Question

这里我使用一些kendo ui小部件在mvc4 razor中开发了一个web应用程序。在我的应用程序中，有一个用于查看，更新和插入记录的kendo网格。

当我按下网格中的“添加新记录”按钮时，插入新记录将可用，按“输入键”我可以转到当前行的下一个单元格（下一列）。

它将有助于在每个单元格中插入数据并转到下一个单元格，只需按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} },
                                        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: [
                            { field: "ProductID", title: "No", width: "90px" },
                            { field: "ProductName", title: "Product Name" },
                            { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "130px" },
                            { field: "UnitsInStock", title: "Units In Stock", width: "130px" },
                            { command: ["destroy"], title: "&nbsp;", width: "175px" }
            //                            { field: "", title: "No", template: "#= ++record #", width: "30px" },
            ],
            editable: { mode: "incell", createAt: "bottom" }
        });
    });
</script>
<script type="text/javascript">
    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;
                }
            });
        });
    }
</script>

但问题是当我按任意行的最后一个单元格的回车键时，它不会给我一个新记录（新行）。

请在这里帮助我..

Answer 1

我有同样的问题，我可以用回车键创建新行，但问题出在页面上，当我按下回车键时，它在网格中创建一个新行，这是不希望。我需要过滤事件，例如当网格处于焦点时。但是我还没能做到。这是我的代码：

$(document.body).keypress(function (e) {
    if (e.keyCode == 13) {
        var grid = $("#grid").data("kendoGrid");
        grid.addRow();
}
});

如果您可以设置过滤器，它将正常工作。如果你能解决它，请告诉我。感谢。

如何使用回车键按键进入剑道网格中的新线路

1 个答案: