ruby-on-rails - Rails 3 使用 Ajax 计算行总数

Question

我有一个发票应用程序。发票有行项目。在您提交发票后，行总计和总计计算得很好。

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

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

Answer 1

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

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);
    });
});

这并不完美(例如，您需要添加一些处理导致 50.9999999 美元的乘法，以及结束零)，但想法是存在的。

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

编辑另请注意，使用此代码，如果其中一个数量为空，它将不起作用。这是一个简单的修复:

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

如果没有值就填“0”，然后照常进行。未经测试。