ここでは、いくつかの剣道 ui ウィジェットを使用して mvc4 razor で Web アプリケーションを開発しました。私のアプリケーションには、レコードの表示、更新、および挿入に使用される剣道グリッドがあります。
グリッドで「新しいレコードを追加」ボタンを押すと、新しいレコードを挿入できるようになり、「Enter キー」を押すと現在の行の次のセル (次の列) に移動できます。
各セルにデータを挿入し、各列をクリックせずに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} },
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: " ", 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>
しかし、問題は、行の最後のセルでEnterキーを押しても、新しいレコード(改行)が表示されないことです。
ここで私を助けてください..