Yii2 - javascriptを使ってダイナミックフォームwbragancaをループする方法

Question

私はdynamicform wbragancaを使用して購入注文操作を行っています。 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> 

この

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

問題の更新を行う場合、それはすべてを計算することができないように私のjavascriptのです。

Answer 1

まず、に感謝します。insaneSkull私はこの質問にお答えします。ここ は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); 
} 

多くの感謝を合計するソリューションです。