Yii2 - 如何使用javascript在dynamicform wbraganca中循環

Question

我正在使用dynamicform wbraganca執行採購訂單操作。 在dynamicform中，我有物品，數量，價格和總數。如果有人編輯項目或數量，它會執行計算每個行項目的總數和總數。我想問如何知道dynamicform中的總行數，以便我可以循環總和。 這裏是我的代碼

<div class="col-sm-8 col-md-3"> 
    <?= $form->field($detail, "[{$i}]item_id")->widget(Select2::className(), [ 
     'data' => ArrayHelper::map(Item::find()->all(), 'id', 'name'), 
     'language' => 'en', 
     'options' => ['placeholder' => 'Select a item ...', 'onchange' => 'getItemPrice($(this))'], 
     'pluginOptions' => [ 
      'allowClear' => true,        
     ], 
    ]); 
    ?> 
</div> 
<div class="col-sm-4 col-md-2"> 
    <?= $form->field($detail, "[{$i}]qty")->widget(MaskedInput::className(), 
     [ 
      'clientOptions' => [ 
       'alias' => 'numeric', 
       'groupSeparator' => ',', 
       'digits' => 0, 
       'autoGroup' => true, 
       'removeMaskOnSubmit' => true, 
       'rightAlign' => false,         
      ], 
      'options' => [ 
       'class' => 'form-control', 
       'onchange' => 'calculateSubtotal($(this))',      
      ]        
     ]) ?> 
</div> 
<div class="col-sm-4 col-md-2"> 
    <?= $form->field($detail, "[{$i}]price")->widget(MaskedInput::className(), 
     [ 
      'clientOptions' => [ 
       'alias' => 'numeric', 
       'groupSeparator' => ',', 
       'digits' => 0, 
       'autoGroup' => true, 
       'removeMaskOnSubmit' => true, 
       'rightAlign' => false,        
      ], 
      'options' => [ 
       'class' => 'form-control', 
       'onchange' => 'calculateSubtotal($(this))',         
      ] 
     ]) ?> 
</div> 
<div class="col-sm-4 col-md-2"> 
    <?= $form->field($detail, "[{$i}]total")->widget(MaskedInput::className(), 
     [ 
      'clientOptions' => [ 
       'alias' => 'numeric', 
       'groupSeparator' => ',', 
       'digits' => 0, 
       'autoGroup' => true, 
       'removeMaskOnSubmit' => true, 
       'rightAlign' => false, 
      ] 
     ]) ?> 
</div> 

和我的JavaScript這樣

<?php 
$script = <<< JS 

jQuery(".dynamicform_wrapper").on("afterInsert", function(e, item) { 
    jQuery(".dynamicform_wrapper .add-item").each(function(index) { 
     calculateTotal(index+1); 
    }); 
}); 

jQuery(".dynamicform_wrapper").on("afterDelete", function() { 
    jQuery(".dynamicform_wrapper .remove-item").each(function(index) {     
     calculateTotal(index+1); 
    }); 
}); 

function getItemPrice(item){ 
    var index = item.attr("id").replace(/[^0-9.]/g, ""); 
    var item_id = $('#purchaseorderdetail-'+ index + "-item_id").val(); 
    $.get('../item/get-price', {id : item_id}, function(data){ 
     $('#purchaseorderdetail-' + index + '-price').val(data); 
     $('#purchaseorderdetail-' + index + '-qty').val(1); 
     $('#purchaseorderdetail-' + index + '-total').val(data); 
     calculateTotal(Number(index)+1); 
    });  
} 

function calculateSubtotal(item){ 
    var index = item.attr("id").replace(/[^0-9.]/g, ""); 
    var qty = $('#purchaseorderdetail-' + index + '-qty').val(); 
    qty = qty == "" ? 0 : Number(qty.split(",").join("")); 
    var price = $('#purchaseorderdetail-' + index + '-price').val(); 
    price = price == "" ? 0 : Number(price.split(",").join("")); 
    $('#purchaseorderdetail-' + index + '-total').val(qty * price);  
    calculateTotal(Number(index)+1); 
} 

function calculateTotal(index){  
    var total = 0;  
    for(i=0; i< index; i++){   
     var subtotal = $('#purchaseorderdetail-' + i + '-total').val();   
     subtotal = subtotal == "" ? 0 : Number(subtotal.split(",").join(""));  
     total = total + subtotal; 
    } 
    $('#purchaseorder-total').val(total); 
} 

JS; 
$this->registerJs($script, $this::POS_END); 
?> 

問題做更新的時候，就不能計算所有。

Answer 1

首先感謝insaneSkull誰幫我回答了這個問題。 這裏是總結了grandtotal

jQuery(".dynamicform_wrapper").on("afterInsert", function(e, item) { 
    calculateTotal(); 
}); 

jQuery(".dynamicform_wrapper").on("afterDelete", function(e) { 
    calculateTotal();  
}); 

function getItemPrice(item){ 
    var index = item.attr("id").replace(/[^0-9.]/g, ""); 
    var item_id = $('#purchaseorderdetail-'+ index + "-item_id").val(); 
    $.get('../item/get-price', {id : item_id}, function(data){ 
     $('#purchaseorderdetail-' + index + '-price').val(data); 
     $('#purchaseorderdetail-' + index + '-qty').val(1); 
     $('#purchaseorderdetail-' + index + '-total').val(data); 
     calculateTotal(); 
    });  
} 

function calculateSubtotal(item){  
    var index = item.attr("id").replace(/[^0-9.]/g, ""); 
    var qty = $('#purchaseorderdetail-' + index + '-qty').val(); 
    qty = qty == "" ? 0 : Number(qty.split(",").join("")); 
    var price = $('#purchaseorderdetail-' + index + '-price').val(); 
    price = price == "" ? 0 : Number(price.split(",").join("")); 
    $('#purchaseorderdetail-' + index + '-total').val(qty * price); 
    calculateTotal(); 
} 

function calculateTotal(){  
    var total = 0;   
    jQuery(".dynamicform_wrapper .remove-item").each(function(index) { 
     var subtotal = $('#purchaseorderdetail-' + index + '-total').val(); 
     if(typeof(subtotal) != 'undefined'){ 
      subtotal = subtotal == "" ? 0 : Number(subtotal.split(",").join(""));  
      total = total + subtotal;  
     }   
    }); 
    $('#purchaseorder-total').val(total); 
} 

非常感謝insaneSkull

解決方案