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

我有一个发票应用程序。发票有行项目。在您提交发票后，行总计和总计将被计算为罚款。
但我也希望在提交发票之前计算行总数和总计。例如，如果更改数量，则行总计和总计应更改。
我目前正在研究不同的jquery插件。也许你以前也做过类似的事情。你推荐什么？

最佳答案

你不需要插件。仅jquery就足够了。您需要做的是在application.js文件中为.change()或.blur()添加一个处理程序。我推荐后者。然后利用html5的“data”属性将价格存储为一个普通的浮动，这样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/
编辑
还要注意，使用此代码时，如果其中一个数量为空，则它将不起作用。这是一个简单的解决方案：

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

如果没有值，只需填写“0”，然后正常进行。未经测试的。