2016-04-18 13 views
1

Also hier ist meine Schienen Ansicht, die eine Form hat, die die product_items zieht und lässt den Benutzer überprüfen alle Artikel, die sie kaufen möchten und die gesamte Bestellmenge unter der Tabelle anzeigen. (beigefügtes Bild) this is the screenshot of the viewRails Jquery Berechnung Summe aus ausgewählten Kontrollkästchen in einer Tabelle

Mein Code sieht wie folgt aus. Die Serverseite ist gut (wo ich die Bestellung speichern kann), aber ich brauche etwas Hilfe auf der Client-Seite js, um die Bestellsumme zu berechnen und die Bestellsumme unter der Tabelle anzuzeigen. Hier

<tbody> 
    <% @cause.product.product_items.each do |item| %> 
    <tr> 
     <td width="60%"><label class="checkbox"><%= f.check_box(:items, { multiple:true, class: 'item_checkbox' }, item.id, nil) %><i></i><%= item.title %></label></td> 

     <td> 
     <label class="select"> 
     <select name="items[<%= item.id %>][qty]"> 
     <option value="0" selected disabled>Qty</option> 
     <option value="1">1</option> 
     <option value="2">2</option> 
     <option value="3">3</option> 
     <option value="4">4</option> 
     <option value="5">5</option> 
     <option value="6">6</option> 
     <option value="7">7</option> 
     <option value="8">8</option> 
     <option value="9">9</option> 
     <option value="10">10</option> 

     </select> 
     <i></i> 
     </label> 
     </td> 
     <td><b><big><%= number_to_currency(item.price, precision: 0) %></big></b></td> 
    </tr> 
    <% end %> 

</tbody> 
</table> 
</div> 
<label><strong>Total order amount: </strong><span class="lead" id="order_amount"></span></label> 

sind einige js, ich wollte das Kontrollkästchen identifizieren, die geprüft wird, und ergreifen Sie die Menge in dieser Tabellenzeile (wieder nicht sicher, wie dies zu tun)

$(".item_checkbox").change(function() { 
    if ($(this).is(":checked")) { 

    alert($(this).siblings($('#select option:selected').text())); 
    } 
}); 
+0

Haben Sie schon einmal JS ausprobiert? Vielleicht könnten Sie eine JSFiddle mit etwas HTML von yout Ansicht erstellt – Bustikiller

+0

Ich habe versucht, die unten, um zu sehen, ob ich die Checkbox identifizieren kann, aber nicht sicher, es ist das sofort. ' $ (" item_checkbox ") ändern (function() { if ($ (this) .ist (.": Checked")) { alert ($ (this) .siblings ($ ('# wählen Option: ausgewählt '). text())); } }); ' – sidj

+0

Bitte bearbeiten Sie Ihre Frage und fügen Sie diesen JS-Code als Teil davon – Bustikiller

Antwort

1

Um das zu berechnen Gesamtbetrag, müssen Sie Uhr für Änderungen für Produkte, die ausgewählt/nicht ausgewählt und Produkte Menge, die auch geändert wird.

Sie könnten Ihre Ansicht aktualisieren wie folgt aussehen (Dinge wurden der Einfachheit halber weggelassen):

<table id="product-items"> 
    <tbody> 
    <% @cause.product.product_items.each do |item| %> 
     <%= tag :tr, data: { price: item.price } do %> 
     <td> 
      <label class="checkbox"> 
      <%= f.check_box(:items, class: 'item_checkbox', item.id) %> 
      <%= item.title %> 
      </label> 
     </td> 
     <td> 
      <label class="select"> 
      <select>...</select> 
     </td> 
     <td> 
      <%= number_to_currency(item.price, precision: 0) %> 
     </td> 
     <% end %> 
    <% end %> 
    </tbody> 
</table> 
<div id='total-amount'></div> 

Wie Sie bemerkt haben, ich verwendet, um die tag Helfer, um ein HTML5-Attributdaten mit erstellen der Name price. Ich habe das getan, um später den Produktwert leichter zu bekommen.

Jetzt, da Sie Ihre Ansicht an Ort und Stelle haben, müssen Sie nur iterieren durch die Artikelliste jedes Mal, wenn ein Produkt Kontrollkästchen aktiviert/deaktiviert oder die Produktmenge ändert. Man könnte so etwas wie diese:

// This line will add event listeners both to your inputs and selects 
// under the #products-items table 
$('#product-items input[type=checkbox], #product-items select').change(function(e) { 

    // Initialize vars 
    var totalAmount = 0; 

    // We need only rows that have checked checkboxes 
    var $tableRows = $('#product-items tr').has('input[type=checkbox]:checked'); 

    // Iterate through each row in order get all needed info 
    $.each($tableRows, function(i, row) { 
    var $row = $(row); 

    // Get the quantity for current product 
    var quantity = row.find('select').val(); 

    // You could uncheck the product if quantity is set to 0 
    // for better user experience 
    if (quantity === 0) { 
     $row.find('input').prop('checked', false); 
    } else { 
     // Get the product price from the data-price attribute 
     var price = $row.data('price'); 

     // I am converting the price to an integer, but you could 
     // change that and use parseFloat if you want to 
     totalAmount += parseInt(price) * parseInt(quantity); 
    } 
    }); 

    $('#total-amount').text('$' + totalAmount); 
}); 

Auf diese Weise jedes Mal, wenn die Menge ändern oder überprüfen/ein Produkt deaktivieren, wird der Gesamtbetrag von Anfang an berechnet werden.

+0

Vielen Dank, Sie gaben mir einige Ideen. Ich werde das versuchen und melden. – sidj

+0

Ich denke, Sie brauchen eine andere <% end %> für das Tag? @ ioannis-tziligkakis – sidj

+0

@sidj ja, du bist richtig. Ich werde den Code aktualisieren, um dies zu beheben. –

0

Danke für die Hilfe @ioannis, hier ist meine letzte Antwort, die mein Problem gelöst hat. Dies zeigt auch eine Bestellübersicht an.

$('#product-items input[type=checkbox], #product-items select').change(function(e) { 

    // Initialize vars 
    var totalAmount = 0; 
    var totalItemAmount = 0; 
    $('#order_summary').text(''); 
    // We need only rows that have checked checkboxes 

    $("input:checkbox:not(:checked)") 

    var $tableRowsNotChecked = $('#product-items tr').has('input[type=checkbox]:not(checked)'); 

    $.each($tableRowsNotChecked, function(i, row) { 
    var $row1 = $(row); 
    $row1.find('.item_qty').hide(); 

    }); 

    var $tableRows = $('#product-items tr').has('input[type=checkbox]:checked'); 

    // Iterate through each row in order get all needed info 
    $.each($tableRows, function(i, row) { 

    // Get the quantity for current product 
    var $row = $(row); 
    var qty = $row.find('select').val(); 
    $row.find('.item_qty').show(); 

    // You could uncheck the product if quantity is set to 0 
    // for better user experience 
    if (qty === 0) { 
     $row.find('input').prop('checked', false); 
    } else { 
     // Get the product price from the data-price attribute 
     var price = $row.data("price"); 
     var item = $row.data("item-name"); 

     // I am converting the price to an integer, but you could 
     // change that and use parseFloat if you want to 
     totalItemAmount = parseInt(price) * parseInt(qty); 
     totalAmount += totalItemAmount; 
     $('#order_summary').append("<tr><td>" + item + "</td><td>" + qty + "</td><td>$" + parseInt(totalItemAmount) + "</td></tr>"); 
    } 
    }); 
    $('#order_summary').append("<tr><td></td><td><strong>Total Amount:</td><td>$" + totalAmount + "</td></strong></tr>"); 
    $('#order-amount').text(totalAmount); 
    $('#cause_amount').val(totalAmount); 
    $("#cause_amount").trigger("change"); 
    // $('input.submit_contribution').val('Buy Now'); 
}); 
Verwandte Themen