Yii2-如何使用javascript在dynamicform wbraganca内部循环
我正在使用DynamicFormWBraganca执行采购订单操作。 在dynamicform中,我有项目、数量、价格和总数。如果有人编辑项目或数量,它将为每行项目执行计算其总计和总计。我想问的是如何知道dynamicform中的总行数,以便我可以循环求和总行数。 这是我的密码Yii2-如何使用javascript在dynamicform wbraganca内部循环,javascript,yii2,Javascript,Yii2,我正在使用DynamicFormWBraganca执行采购订单操作。 在dynamicform中,我有项目、数量、价格和总数。如果有人编辑项目或数量,它将为每行项目执行计算其总计和总计。我想问的是如何知道dynamicform中的总行数,以便我可以循环求和总行数。 这是我的密码 <div class="col-sm-8 col-md-3"> <?= $form->field($detail, "[{$i}]item_id")->widget(Select2:
<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);
?>
更新时出现的问题无法全部计算。首先感谢Inaseskull帮助我回答这个问题。
下面是求和的方法
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);
}
非常感谢英萨斯库