我有这个简单的demo我创造的。需要帮助如何实现这一目标？
价格值可以根据数量输入进行更改。我希望文本框显示价格总和。它还可以根据网格中的数量输入进行动态变化。为什么我的“2 位小数点”格式
{0:n2}不起作用，示例价格为 3.00，但在我的模板列中仅显示 3 ？
最佳答案
尝试this
$("#totalPrice").kendoNumericTextBox({
spinners: false,
format: "{0:c2}",
decimals: 2,
restrictDecimals: true
});
var grid = $('#grid').kendoGrid({
dataSource: {
data: [{ 'id': 'A1','quantity': 1,'price': 9.91 },
{ 'id': 'B1', 'quantity': 1, 'price': 3.00 },
{ 'id': 'C1', 'quantity': 1, 'price': 1.23 }],
schema: {
model: {
id: "id",
fields: {
id : { editable: false },
quantity : { type: "number", editable: true , validation: { min: 0 } },
price : { type: "number", editable: true }
}
}
}
},
editable: true, //"incell",
//editable: "incell",
// toolbar: [{ name: "create", text: "Add" }],
columns: [
{ field: "id", title: "id" },
{ field: "quantity", title: "quantity" },
{ field: "price", format:"{0:c2}", editable: false },
{ command: ["destroy"], title: " " }
],
edit: function(e) {
$('[name="quantity"]').change(
function(){
var newQuantity = parseInt($(this).val());
var oldQuantity = parseInt(e.model.quantity);
var oldPrice = parseFloat(e.model.price);
if (newQuantity > 0){
if(oldQuantity > 0){
var newPrice = ( oldPrice / oldQuantity) * newQuantity;
} else {
var newPrice = oldPrice * newQuantity;
}
e.model.set("price", newPrice);
var oldTotalPrice = $("#totalPrice").val();
var newTotalPrice = oldTotalPrice - oldPrice + newPrice;
$("#totalPrice").data("kendoNumericTextBox").value(newTotalPrice);
}
});
},
dataBound: function(e) {
var gridData = $("#grid").data().kendoGrid.dataSource.view();
let total_price = 0;
gridData.forEach(element => {
total_price = total_price + element.price;
});
$("#totalPrice").data("kendoNumericTextBox").value(total_price);
}
});<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.mobile.all.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script>
<style>
.k-edit-form-container { width: 500px;}
.k-popup-edit-form .k-edit-label { width: 20%; text-align: left; }
.k-popup-edit-form .k-edit-field { width: 70%; }
.k-popup-edit-form .k-edit-field > .k-textbox,
.k-popup-edit-form .k-edit-field > .k-widget:not(.k-tooltip)
{ width: 98%; }
</style>
</head>
<body>
<div id="grid"></div>
Sum of Total Price = <input id="totalPrice" type=text />
<script id="popup_editor" type="text/x-kendo-template">
<div class="k-edit-label">
<label for="calculation">Calculation</label>
</div>
<input class="k-radio" type="radio" id="RadioPercentage" name="calculation" value="percentage" />
<label class="k-radio-label" style="margin: 8px 0px 5px 0px; padding-right: 40px;" for="RadioPercentage" >Percentage</label>
<input type="text" id="percentage" class="k-input k-textbox" data-role="percentage" data-bind="value: percentage" />
<br>
<input class="k-radio" type="radio" id="RadioAmount" name="calculation" value="amount" />
<label class="k-radio-label" style="margin: 8px 0px 5px 0px; padding-right: 58px;" for="RadioAmount" >Amount</label>
<input type="text" id="amount" class="k-input k-textbox" data-role="amount" data-bind="value: amount" />
</script>
</body>
</html>关于javascript - Kendo Ui 网格计算并在文本框中显示总价之和，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59621652/