Rails 3 使用 Ajax 计算行总数 [英] Rails 3 calculate line totals with Ajax

问题描述

我有一个发票应用.发票具有行项目.提交发票后，行总计和总计计算得很好.

但我还想在提交发票之前计算行总计和总计.例如，如果您更改数量，则行总计和总计应更改.

我目前正在研究不同的 jQuery 插件.也许你过去做过类似的事情.你会推荐什么?

解决方案

您不需要插件.仅 jQuery 就足够了.您要做的是在 application.js 文件中为 .change() 或 .blur() 添加一个处理程序.我推荐后者.然后利用 HTML5 的data-"属性将价格存储为一个普通的 Float，以便 jQuery 可以抓取它并对其进行一些数学运算.

invoice.html.erb

<h3>项目#1</h3>价格:<div class="price" data-price="10.20">$10.20 USD</div>数量:<input type="text" size="2" id="product_1_quantity" class="quantity" value="1"></div><br/><br/><div class="item"><h3>项目#2</h3>价格:<div class="price" data-price="3.50">$3.50 USD</div>数量:<input type="text" size="2" id="product_2_quantity" class="quantity" value="1"></div><br/><br/>总价:<span id="total-price">输入数量</span>

application.js

function getTotal(quantities) {无功总计 = 0;$.each(数量，功能(){总计 += parseFloat($(this).closest('.item').find('.price').attr('data-price')) * parseInt($(this).val());});$("#total-price").html("$" + total + " USD");}$(document).ready(function() {var 数量 = $('.quantity');getTotal(数量)；//所以总数是在页面加载时计算的.数量.模糊(功能(){getTotal(数量)；});});

这并不完美(例如，您需要为导致 $50.9999999 的乘法以及结束零添加一些处理)，但想法就在那里.

在这里测试:http://jsfiddle.net/J3YKh/1/

编辑另请注意，使用此代码，如果其中一个数量为空，它将不起作用.这很容易解决:

quantity.blur(function() {var qty = $(this).val;如果(！数量)数量 = '0';getTotal(数量)；}

如果没有值就填0"，然后照常进行.未经测试.

I have an invoice app. An invoice has line items. The line totals and grand total are calculated fine after you submit the invoice.

But I also would like to calculate the line totals and grand total BEFORE the invoice is submitted. For example, if you change the quantity, the line total and grand total should change.

I'm currently looking at different jQuery plugins. Maybe you have done something similar in the past. What would you recommend?

解决方案

You don't need a plugin. jQuery alone is enough. What you'll want to do is add a handler in your application.js file for either .change() or .blur(). I recommend the latter. Then utilize HTML5's "data-" attributes to store the price as a plain Float so that jQuery can grab it and do some math to it.

invoice.html.erb

<div class="item">
    <h3>Item #1</h3>
    Price: <div class="price" data-price="10.20">$10.20 USD</div>
    Qty: <input type="text" size="2" id="product_1_quantity" class="quantity" value="1"> 
</div><br /><br />

<div class="item">
    <h3>Item #2</h3>
    Price: <div class="price" data-price="3.50">$3.50 USD</div>
    Qty: <input type="text" size="2" id="product_2_quantity" class="quantity" value="1">
</div><br /><br />

Total Price: <span id="total-price">input quantities</span>

application.js

function getTotal(quantities) {
    var total = 0;
    $.each(quantities, function() {
        total += parseFloat($(this).closest('.item').find('.price').attr('data-price')) * parseInt($(this).val());
    });
    $("#total-price").html("$" + total + " USD");
}

$(document).ready(function() {      
    var quantity = $('.quantity');
    getTotal(quantity); // So the total is calculated on page load.

    quantity.blur(function() {
        getTotal(quantity);
    });
});

This isn't perfect (you'll need to add some handling for multiplication that causes $50.9999999, for example, and for ending Zero's), but the idea is there.

Tested here: http://jsfiddle.net/J3YKh/1/

edit Also note that with this code, if one of the quantities is empty, it will not work. That's an easy fix:

quantity.blur(function() {
    var qty = $(this).val;
    if(!qty) qty = '0';
    getTotal(quantity);
}

Just fills in "0" if there is no value, then proceeds as normal. Untested.

这篇关于Rails 3 使用 Ajax 计算行总数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！