[英]Kendo Ui grid calculate and display sum of total price in the textbox
我創建了這個簡單的演示。 需要幫助如何實現這一目標？
Price值可以根據quantity輸入而變化。 我希望文本框顯示總價格。 也可以根據網格中輸入的quantity動態變化。
為什么我的“2 個小數點”格式{0:n2}不起作用，示例價格是 3.00 但它只在我的模板列中顯示 3？
試試這個
$("#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>
計算總和並在文本框中顯示總金額，並在 jquery 中顯示文本“/-+GST”
[英]Calculate the sum and display in textbox to total amount and with text "/-+GST" in jquery
如何根據onkeypress文本框中的給定值計算價格，小計和總計？
[英]how to calculate the price, subtotal and total based on given value in textbox onkeypress?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.