嗨，我是剑道网格的初学者。在编辑模式下，一旦我键入原始价格和税额，我想立即汇总最终价格。请参阅下面的代码
<div class="panel-body">
<div id="productRobPrice-grid"></div>
<script>
var record = 0;
$(document).ready(function () {
$("#productRobPrice-grid").kendoGrid({
dataSource: {
type: "json",
transport: {
create: {
url: "@Html.Raw(Url.Action("ProductRobPriceAdd", "Product"))",
type: "POST",
dataType: "json",
data: addAntiForgeryToken
},
read: {
url: "@Html.Raw(Url.Action("ProductRobPriceList", "Product", new {productId = Model.Id}))",
type: "POST",
dataType: "json",
data: addAntiForgeryToken
},
update: {
url: "@Html.Raw(Url.Action("ProductPictureUpdate", "Product"))",
type: "POST",
dataType: "json",
data: addAntiForgeryToken
},
destroy: {
url: "@Html.Raw(Url.Action("ProductPictureDelete", "Product"))",
type: "POST",
dataType: "json",
data: addAntiForgeryToken
}
},
schema: {
data: "Data",
total: "Total",
errors: "Errors",
model: {
id: "Id",
fields: {
OriginalPrice: {
type: "number", validation: { required: true, min: 1 },
},
Tax: {
type: "number", validation: { required: true, min: 1 },
defaultValue: 6.00
},
FinalPrice: { type: "number", validation: { required: true, min: 1 } },
QuantityFrom: { type: "number", validation: { required: true, min: 1 } },
QuantityTill: { type: "number", validation: { required: true, min: 1 } },
Avalaible: { type: "boolean", defaultValue: true },
AvalaibleQuantity: { type: "number" },
}
}
},
requestEnd: function (e) {
if (e.type == "update") {
this.read();
}
},
error: function (e) {
display_kendoui_grid_error(e);
// Cancel the changes
this.cancelChanges();
},
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
pageable: {
refresh: true,
numeric: false,
previousNext: false,
info: false,
@Html.Partial("_GridPagerMessages")
},
editable: {
confirmation: "@T("Admin.Common.DeleteConfirmation")",
mode: "inline"
},
scrollable: false,
toolbar: [{ name: "create", text: "@T("Admin.Common.AddNewRecord")" }],
columns: [
{
field: "OriginalPrice",
template: "<strong>#: OriginalPrice # </strong>"
},
{
field: "Tax",
title: "@T("Admin.Catalog.Products.RobSale.Fields.Tax")",
},
{
field: "FinalPrice",
format: "{0:c}",
title: "@T("Admin.Catalog.Products.RobSale.Fields.FinalPrice")",
},
{
field: "QuantityFrom",
format: "{0:d}",
title: "@T("Admin.Catalog.Products.RobSale.Fields.QuantityFrom")",
},
{
field: "QuantityTill",
title: "@T("Admin.Catalog.Products.RobSale.Fields.QuantityTill")",
},
{
field: "Avalaible",
title: "@T("Admin.Catalog.Products.RobSale.Fields.Avalaible")",
},
{
command: [
{
name: "edit",
text: {
edit: "@T("Admin.Common.Edit")",
update: "@T("Admin.Common.Update")",
cancel: "@T("Admin.Common.Cancel")"
}
}, {
name: "destroy",
text: "@T("Admin.Common.Delete")"
}
],
width: 200
}
]
});
});
</script>
</div>
但目前有一个问题，原始价格文本框 keyup似乎无法触发。请给出一些指导。 TQ
答案 0 :(得分：0)
要将功能附加到keyup事件，您需要创建custom editor function。
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [{
field: "name"
}, {
field: "price",
editor: function(container, options) {
// create an input element
var input = $("<input/>");
// set its name to the field to which the column is bound ('name' in this case)
input.attr("name", options.field);
input.keyup(function() {
alert("key up");
});
// append it to the container
input.appendTo(container);
// initialize a Kendo UI AutoComplete
input.kendoNumericTextBox();
}
},
{
command: "edit"
}
],
editable: true,
dataSource: [{
name: "Jane Doe",
price: 5
}, {
name: "John Doe",
price: 10
}],
editable: {
mode: "inline"
}
});
</script>
但我认为你可能需要像this这样的东西。一个聚合函数，它将重新计算其变化值。不像keyup那么直接，但应该适合你。