<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: " ", 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 一起工作。
关于jquery - 如何通过按 Enter 键聚焦剑道网格中的下一个单元格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17464977/