kendo UI中gird回车到下一个方格
时间: 2024-05-05 20:18:18 浏览: 78
Kendo UI Grid
您可以使用Kendo UI Grid的内置编辑器并在其上注入自定义事件来处理回车键。首先,您需要在Grid的column定义中指定'editor'选项。然后,您可以使用keydown事件来拦截回车键并将焦点移动到下一个单元格。以下是一个基本示例:
```javascript
$("#grid").kendoGrid({
dataSource: {
data: [
{ id: 1, name: "John", age: 25 },
{ id: 2, name: "Jane", age: 30 }
],
schema: {
model: {
id: "id",
fields: {
name: { type: "string" },
age: { type: "number" }
}
}
}
},
columns: [
{ field: "name", title: "Name", width: "120px", editor: customEditor },
{ field: "age", title: "Age", width: "80px", editor: customEditor }
],
editable: "inline"
});
function customEditor(container, options) {
var input = $("<input/>");
input.attr("name", options.field);
input.appendTo(container);
// bind the keydown event
input.on("keydown", function(e) {
// check if the key pressed is the enter key
if (e.keyCode === 13) {
e.preventDefault();
// find the next input field and focus it
$(this).closest(".k-grid-edit-row")
.next(".k-grid-edit-row")
.find("input[name='" + options.field + "']")
.focus();
}
});
}
```
阅读全文