计算嵌套的Yii2动态输入表单

时间:2017-08-02 15:08:21

标签: javascript jquery forms yii2

晕,我正在使用Yii2动态表格wbraganca。我想将嵌套表单计算为主窗体中的输入字段。

这是我的主要动态形式:

_form.php这个

<h3>Data Pengeluaran</h3>
<?php DynamicFormWidget::begin([
    'widgetContainer' => 'dynamicform_pengeluaran',
    'widgetBody' => '.container-pengeluaran',
    'widgetItem' => '.item-pengeluaran',
    'min' => 1,
    'insertButton' => '.add-item-pengeluaran',
    'deleteButton' => '.remove-item-pengeluaran',
    'model' => $modelPengeluaran[0],
    'formId' => 'dynamic-form',
    'formFields' => [
        'tgl_pengeluaran',
        'nama_toko',
        'metode_pembayaran',
        'waktu_pembayaran',
        'jlh_pengeluaran',
        'jlh_bayar',
    ],
]); ?>
<div class="container-pengeluaran"><!-- widgetContainer -->
<?php foreach ($modelPengeluaran as $index => $modelPengeluaran): ?>
    <div class="item-pengeluaran panel panel-default"><!-- widgetBody -->
        <div class="panel-heading">
            <h3 class="panel-title pull-left">Pengeluaran</h3>
            <div class="pull-right">
                <button type="button" class="add-item-pengeluaran btn btn-success btn-xs"><i class="glyphicon glyphicon-plus"></i></button>
                <button type="button" class="remove-item-pengeluaran btn btn-danger btn-xs"><i class="glyphicon glyphicon-minus"></i></button>
            </div>
            <div class="clearfix"></div>
        </div>
        <div class="panel-body">
            <?php
                // necessary for update action.
                if (! $modelPengeluaran->isNewRecord) {
                    echo Html::activeHiddenInput($modelPengeluaran, "[{$index}]id");
                }
            ?>
            <div class="row">
                <div class="col-md-12">
                <?= $form->field($modelPengeluaran, "[{$index}]tgl_pengeluaran")->widget(DatePicker::classname(), [
                        'type' => DatePicker::TYPE_COMPONENT_APPEND,
                        'options' => ['placeholder' => '-- Tanggal Pengeluaran --'],
                        'pluginOptions' => [
                            'autoclose'=>true,
                            'format' => 'yyyy-mm-dd',
                            'todayHighlight' => true
                        ]
                    ]);
                ?>

                <?= $form->field($modelPengeluaran, "[{$index}]nama_toko")->textInput(['maxlength' => true]) ?>

                <?= $form->field($modelPengeluaran, "[{$index}]metode_pembayaran")->dropDownList([ 'Tunai' => 'Tunai', 'Hutang' => 'Hutang', ], ['prompt' => '-- Pilih Pembayaran --']) ?>

                <?= $form->field($modelPengeluaran, "[{$index}]waktu_pembayaran")->dropDownList([ 'Berangkat' => 'Berangkat', 'Pulang' => 'Pulang', ], ['prompt' => '-- Pilih Waktu Pembayaran --']) ?>

                <?= $this->render('_form-barang', [
                    'form' => $form,
                    'index' => $index,
                    'modelBarang' => $modelBarang[$index],
                ]) ?>

                <?= $form->field($modelPengeluaran, "[{$index}]jlh_pengeluaran")->widget(\yii\widgets\MaskedInput::className(),
                    [
                        'clientOptions' => [
                            'alias' => 'numeric',
                            'groupSeparator' => '.',
                            'digits' => 0,
                            'autoGroup' => true,
                            'removeMaskOnSubmit' => true,
                            'rightAlign' => false,                                                                  
                        ],
                        'options' => [
                            'class' => 'form-control',
                            'maxlength' => true,
                        ]                                                               
                    ])
                ?>

                <?= $form->field($modelPengeluaran, "[{$index}]jlh_bayar")->widget(\yii\widgets\MaskedInput::className(),
                    [
                        'clientOptions' => [
                            'alias' => 'numeric',
                            'groupSeparator' => '.',
                            'digits' => 0,
                            'autoGroup' => true,
                            'removeMaskOnSubmit' => true,
                            'rightAlign' => false,                                                                  
                        ],
                        'options' => [
                            'class' => 'form-control',
                            'maxlength' => true,
                        ]                                                               
                    ])
                ?>
                </div>
            </div><!-- .row -->
        </div>
    </div>
<?php endforeach; ?>
</div>
<?php DynamicFormWidget::end(); ?>

这是我的嵌套动态形式:

_form-b​​arang.php

<?php DynamicFormWidget::begin([
    'widgetContainer' => 'dynamicform_inner',
    'widgetBody' => '.container-barang',
    'widgetItem' => '.item-barang',
    'min' => 1,
    'insertButton' => '.add-barang',
    'deleteButton' => '.remove-barang',
    'model' => $modelBarang[0],
    'formId' => 'dynamic-form',
    'formFields' => [
        'jlh_barang',
        'nama_barang',
        'jlh_harga',
    ],
]); ?>
<table class="table">
    <tbody class="container-barang">
    <?php foreach ($modelBarang as $indexBarang => $modelBarang): ?>
        <tr class="item-barang">
            <td class="vcenter">
                <?php
                    // necessary for update action.
                    if (! $modelBarang->isNewRecord) {
                        echo Html::activeHiddenInput($modelBarang, "[{$index}][{$indexBarang}]id");
                    }
                ?>
                <?= $form->field($modelBarang, "[{$index}][{$indexBarang}]jlh_barang")->widget(\yii\widgets\MaskedInput::className(),
                    [
                        'clientOptions' => [
                            'alias' => 'numeric',
                            'groupSeparator' => '.',
                            'digits' => 0,
                            'autoGroup' => true,
                            'removeMaskOnSubmit' => true,
                            'rightAlign' => false,                                                                  
                        ],
                        'options' => [
                            'class' => 'form-control',
                            'maxlength' => true,
                        ]                                                               
                    ])
                ?>
            </td>
            <td>
                <?= $form->field($modelBarang, "[{$index}][{$indexBarang}]nama_barang")->textInput(['maxlength' => true]) ?>
            </td>
            <td>
                <?= $form->field($modelBarang, "[{$index}][{$indexBarang}]jlh_harga")->widget(\yii\widgets\MaskedInput::className(),
                    [
                        'clientOptions' => [
                            'alias' => 'numeric',
                            'groupSeparator' => '.',
                            'digits' => 0,
                            'autoGroup' => true,
                            'removeMaskOnSubmit' => true,
                            'rightAlign' => false,                                                                  
                        ],
                        'options' => [
                            'class' => 'form-control',
                            'maxlength' => true,
                        ]                                                               
                    ])
                ?>
            </td>
            <td class="text-center vcenter" style="width: 90px;">
                <button type="button" class="add-barang btn btn-success btn-xs"><span class="glyphicon glyphicon-plus"></span></button>
                <button type="button" class="remove-barang btn btn-danger btn-xs"><span class="glyphicon glyphicon-minus"></span></button>
            </td>
        </tr>
    <?php endforeach; ?>
    </tbody>
</table>
<?php DynamicFormWidget::end(); ?>

从那起,这是截图: enter image description here

我尝试按照此question中的代码进行操作,但我刚刚从嵌套表单中获取了最后一个值,就像在图片上一样。

这是我的剧本:

$(document).on('keyup', 'input[id^="barangpengeluaran-"]', function() {
    var index = $(this).attr("id").replace(/[^0-9.]/g, "");
    var index_pengeluaran = index.substring(0,1);
    var index_barang = index.substring(1,2);

    var index_fix = index_pengeluaran+'-'+index_barang;

    var sum = 0;

    $('#barangpengeluaran-'+index_fix+'-jlh_harga').each(function() {
        var harga = $(this).val().replace(/,/g , "");
        sum = parseInt(sum) + parseInt(harga);
    });

    $('#pengeluaran-'+index_pengeluaran+'-jlh_pengeluaran').val(sum);
});

1 个答案:

答案 0 :(得分:0)

您必须填充所有嵌套表单子项,您可以尝试使用删除按钮ID填充

我注意到您设置了带有ID&#34; .remove-barang&#34;

的删除按钮

所以,答案是这样的:

    $(document).on('keyup', 'input[id^="barangpengeluaran-"]', function() {
            var index = $(this).attr("id").replace(/[^0-9.]/g, "");
            var index_pengeluaran = index.substring(0,1);
            var index_barang = index.substring(1,2);

            var index_fix = index_pengeluaran+'-'+index_barang;

            var sum = 0;

            // populate delete button and get the index
            jQuery(".dynamicform_wrapper .remove-barang").each(function(index) {
                // get the value of each column
                var harga = $('#barangpengeluaran-' + index + '-jlh_harga').val().replace(/,/g , "");
                // sum all of harga
                sum += harga;
            });


            $('#pengeluaran-'+index_pengeluaran+'-jlh_pengeluaran').val(sum);
    });

但我认为你必须添加列小计,我会帮助你提供更好的解决方案