Rails 3 使用 Ajax 计算行总数

我有一个发票应用程序。发票有行项目。提交发票后，即可正确计算行总计和总计。

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

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

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

发票.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>

应用程序.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/ http://jsfiddle.net/J3YKh/1/

edit另请注意，使用此代码时，如果其中一个数量为空，则该代码将不起作用。这是一个简单的修复：

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

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