如何使用wbraganca-yii2-dynamicform对动态字段求和? [英] How sum dynamic fields using wbraganca-yii2-dynamicform?

问题描述

我是新来的. 我需要帮助.我使用了一个名为"wbraganca/yii2-dynamicform"的插件. 我有一个允许两个字段(caja1和caja2，总和的结果是总计")之和的形式. 这行得通. 但是，当我使用"Add rows"按钮时，我遇到了问题.这些字段不允许添加. 仅第一行有效，而新行无效. 如何使它也动态地工作?

I'm new here. I need help. I use a plugins called "wbraganca / yii2-dynamicform". I have a form that allows the sum of two fields (caja1 and caja2, and the result of the add is "total"). This works. But I have a problem, when I use the "Add rows" button. These fields do not allow addition. Only the first row works but the new ones do not. How can I make it work also dynamically?

谢谢.

我的观点.

<?php
use yii\helpers\Html;
use yii\widgets\ActiveForm;
use yii\jui\JuiAsset;
use yii\web\JsExpression;
use kartik\widgets\FileInput;
use app\modules\yii2extensions\models\Image;
use wbraganca\dynamicform\DynamicFormWidget;
use yii\helpers\Url;

?>

<script>

function Totales() {

with (document.forms["dynamic-form"]) 
               {
        var totalResult = Number( caja1.value ) + Number( caja2.value );

        total.value = totalResult;
                }
}

</script>


<br>
<center><h2>Details</h2></center>
<br><br><br>

<?php $form = ActiveForm::begin(['id' => 'dynamic-form']); ?>

<?= $form->field($modeli, 'form1')->hiddenInput(['value' => 'formito1'])->label(false); ?>


    <div id="panel-option-values" class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title"><i class="fa fa-check-square-o"></i><b>Personal Externo</b></h3>
    </div></br>

    <?php DynamicFormWidget::begin([
        'widgetContainer' => 'dynamicform_wrapper1',
        'widgetBody' => '.form-options-body1',
        'widgetItem' => '.form-options-item1',
        'limit' => 3,
        'min' => 1,
        'insertButton' => '.add-item',
        'deleteButton' => '.delete-item',
        'model' => $modelsPoItem[0],
        'formId' => 'dynamic-form',
        'formFields' => [
            'nombre',
            'tipop',
            'horas', 
            'valorhora', 
            'total', 
        ],
    ]); ?>
    <table class="table table-bordered table-striped margin-b-none">
        <div style="margin-left: 10px;">
        <button type="button" class="add-item btn btn-success btn-sm"><span class="fa fa-plus"></span>+ Add Rows</button><br></br>
        </div>
        <thead>
            <tr>
                <th style="width: 10px; text-align: center"></th> 
                <th style="width: 40px; text-align: center">Name</th>
                <th style="width: 40px; text-align: center">Tipe</th>
                <th style="width: 40px; text-align: center">H-H</th>
                <th style="width: 40px; text-align: center">Value H-H ($)</th>
                <th style="width: 40px; text-align: center">Total ($)</th>
                <th style="width: 40px; text-align: center">Edit</th>
            </tr>
        </thead>

        <tbody class="form-options-body1">
            <?php foreach ($modelsPoItem as $index => $modelOptionValue): ?>
                <?php
                            // necessary for update action.
                            if (! $modelOptionValue->isNewRecord) {
                                echo Html::activeHiddenInput($modelOptionValue, "[{$i}]id");
                            }
                        ?>
                <tr class="form-options-item1">
                    <td class="sortable-handle text-center vcenter" style="cursor: move;">
                        <i class="glyphicon glyphicon-fullscreen"></i>
                    </td>

                    <td class="sortable-handle text-center vcenter">
                        <?= $form->field($modelOptionValue, "[{$index}]nombre")->label(false); ?>
                    </td>

                    <td class="sortable-handle text-center vcenter">
                    <?= 
                    $form->field($modelOptionValue, "[{$index}]tipop")->dropdownList([
                        'Profesional' => 'Profesional', 
                        'Tecnico' => 'Tecnico'
                         ],['prompt'=>'Select Category']
                                    )->label(false); ?>                     
                    </td>

                    <td class="sortable-handle text-center vcenter">
                    <?= $form->field($modelOptionValue, "[{$index}]horas")->textInput(['onkeyup' => 'Totales()', 'id' =>'caja1' ])->label(false); ?>                     
                    </td>

                    <td class="sortable-handle text-center vcenter">
                    <?= $form->field($modelOptionValue, "[{$index}]valorhora")->textInput(['onkeyup' => 'Totales()', 'id' =>'caja2' ])->label(false); ?>                     
                    </td>

                    <td class="sortable-handle text-center vcenter">
                    <?= $form->field($modelOptionValue, "[{$index}]total")->textInput(['onkeyup' => 'Totales()', 'id' =>'total' ])->label(false); ?>                     
                    </td>

                    <td class="text-center vcenter">
                        <button type="button" class="delete-item btn btn-danger btn-xs"><i class="glyphicon glyphicon-minus"></i></button>
                    </td>
</form>
                </tr>
            <?php endforeach; ?>
        </tbody>
    </table>

    <?php DynamicFormWidget::end(); ?>
</div>


<!--button saving-->
<div class="pull-right">
 <div class="form-group">
        <?= Html::submitButton('Save', ['class' => 'btn btn-primary']) ?>
    </div>
</div>

<?php ActiveForm::end(); ?>

推荐答案

_form.php

<td class="sortable-handle text-center vcenter">
    <?= $form->field($modelOptionValue, "[{$index}]horas")->textInput(['onkeyup' => 'totales($(this))'])->label(false); ?>                     
</td>

<td class="sortable-handle text-center vcenter">
   <?= $form->field($modelOptionValue, "[{$index}]valorhora")->textInput(['onkeyup' => 'totales($(this))'])->label(false); ?>                     
</td>

<td class="sortable-handle text-center vcenter">
   <?= $form->field($modelOptionValue, "[{$index}]total")->textInput()->label(false); ?>                     
</td>

JS

使用自动生成的字段ID代替自定义ID.您可以检查元素以查找为字段生成的ID.假设您的字段ID.对于前. modelOptionValue-1-horas用于第一个字段.

Use auto-generated field id instead of custom id. You can inspect element to find what is generated id for field. Assuming your field id. For ex. modelOptionValue-1-horas for first field.

function totales(item){   
   var index  = item.attr("id").replace(/[^0-9.]/g, "");   
   var horas = $('#modelOptionValue-' + index + '-horas').val();
   horas = horas == "" ? 0 : Number(horas.split(",").join(""));
   var valorhora = $('#modelOptionValue-' + index + '-valorhora').val();
   valorhora = valorhora == "" ? 0 : Number(valorhora.split(",").join(""));
   $('#modelOptionValue-' + index + '-total').val(horas + valorhora);     
}

这篇关于如何使用wbraganca-yii2-dynamicform对动态字段求和?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！