首页 文章

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

提问于
浏览
1

我正在使用dynamicform wbraganca来执行采购订单操作 . 在dynamicform中,我有item,qty,price和total . 如果有人编辑了项目或数量,它将执行计算每个行项目的总数和总和 . 我想问一下如何知道动态形式中的总行数,这样我就可以循环总和 . 这是我的代码

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

做更新时的问题,它不能全部计算 .

1 回答

  • 1

    首先感谢insaneSkull,他帮我回答了这个问题 . 这是解决总计的解决方案

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

    非常感谢疯狂的斯库尔

相关问题