显示动态表到bootstrap模式

时间:2016-11-02 14:33:29

标签: javascript php jquery yii2

我在yii2中有一个动态表单,所以我决定使用这个很棒的扩展名:wbraganca

table

我的代码是这样的:

<div class="col-md-8">
        <div class="padding-v-md">
            <div class="line line-dashed"></div>
        </div>

        <?php
        DynamicFormWidget::begin([

            'widgetContainer' => 'dynamicform_wrapper', // required: only alphanumeric characters plus "_" [A-Za-z0-9_]
            'widgetBody' => '.container-items', // required: css class selector
            'widgetItem' => '.item', // required: css class
            'limit' => 10, // the maximum times, an element can be cloned (default 999)
            'min' => 1, // 0 or 1 (default 1)
            'insertButton' => '.add-item', // css class
            'deleteButton' => '.remove-item', // css class
            'model' => $modelsTransactionDetail[0],
            'formId' => 'dynamic-form',
            'formFields' => [
                'item_id',
                'karyawan_id',
                'harga_jual',
                'jumlah_jual',
                'subtotal'
            ],
        ]);
        ?>

        <div class="panel panel-default">
            <div class="panel-heading">
                <i class="fa fa-money"></i> Item Pembelian
                <div class="clearfix"></div>
            </div>

            <div class="panel-body"><!-- widgetContainer -->

                <table class="table table-bordered table-striped container-items">
                    <thead>
                        <tr>
                            <th style="width: 30%">Item</th>
                            <th style="width: 15%">By</th>
                            <th style="width: 18%">Harga</th>
                            <th style="width: 8%">Qty</th>
                            <th style="width: 25%">Sub Total</th>
                            <th class="text-center" style="width: 5%">Act</th>
                        </tr>

                    </thead>
                    <tbody>
                        <?php foreach ($modelsTransactionDetail as $indexTools => $modelTools): ?>
                            <tr class="item">
                                <td class="vcenter">

                                    <?=
                                    $form->field($modelTools, "[{$indexTools}]item_id")->label(false)->dropDownList(ArrayHelper::map(ItemLayanan::find()->all(), 'id', 'nama_item'), ['prompt' => 'Select item',
                                        'class' => 'item_id',
                                        'onchange' => ''
                                        . 'var $this = $(this);'
                                        . 'var $row = $this.closest("tr");'
                                        . 'var $qty = $row.find(".jumlah-jual").val();'
                                        . 'var $price = $row.find(".harga-jual").val();'
                                        . '$.post("' . Url::to(['get-price-item', 'id' => '']) . '" + $(this).val(), function(data) {
                                                  $row.find(".harga-jual").val(data.price.harga);
                                                  $row.find(".subtotal").val($qty*$price)

                                           });']
                                    )
                                    ?>
                                </td>
                                <td class="vcenter">

                                    <?=
                                    $form->field($modelTools, "[{$indexTools}]karyawan_id")->label(false)->dropDownList(
                                            ArrayHelper::map(Karyawan::find()->all(), 'id', 'nama_karyawan'), ['prompt' => 'Select Karyawan']
                                    )
                                    ?>
                                </td>
                                <td class="vcenter">
                                    <?= $form->field($modelTools, "[{$indexTools}]harga_jual")->label(false)->textInput(['maxlength' => true, 'class' => 'harga-jual']) ?>
                                </td>
                                <td class="vcenter">
                                    <?=
                                    $form->field($modelTools, "[{$indexTools}]jumlah_jual")->label(false)->textInput(['maxlength' => true,
                                        'class' => 'jumlah-jual',
                                        'onblur' => ''
                                        . 'var sum = 0;'
                                        . 'var quantity = 0;'
                                        . 'var $this = $(this);'
                                        . 'var $baris = $this.closest("tr");'
                                        . 'var cariHarga = $baris.find(".harga-jual").val();'
                                        . '$baris.find(".subtotal").val($this.val()*cariHarga);'
                                        . ''
                                        . '$(".subtotal").each(function(){'
                                        . 'var price = $(this);'
                                        . 'var q = price.closest("tr").find(".subtotal").val();'
                                        . 'sum +=  parseInt(q);'
                                        . 'quantity += parseInt(q)'
                                        . '});'
                                        . ''
                                        . '$("#ditagihkan").val(sum)'
                                        . ''
                                            ]
                                    )
                                    ?>
                                </td>
                                <td class="vcenter">
                                    <?= $form->field($modelTools, "[{$indexTools}]subtotal")->label(false)->textInput(['maxlength' => true, 'class' => 'subtotal']) ?>
                                </td>
                                <td class="text-center vcenter" style="width: 90px;">
                                    <!--<button type="button" class="remove-item btn btn-danger btn-xs"></button>-->
                                    <?=
                                    Html::button('<span class="glyphicon glyphicon-minus-sign"></span>', ['class' => 'remove-item btn btn-danger btn-xs',
                                        'onclick' => ''
                                        . 'var sum = 0;'
                                        . 'var quantity = 0;'
                                        . 'var dibayarkan  = $("#ditagihkan").val();'
                                        . 'var $this = $(this);'
                                        . 'var $baris = $this.closest("tr");'
                                        . 'var cariHarga = $baris.find(".subtotal").val();'
                                        . 'if(cariHarga.length > 0){'
                                        . 'console.log("dikurangi");'
                                        . '$("#ditagihkan").val(parseInt(dibayarkan)-parseInt(cariHarga))'
                                        . '}else{'
                                        . '}'
                                    ])
                                    ?>
                                </td>
                            </tr>
                        <?php endforeach; ?>
                    </tbody>
                    <tfoot>
                        <tr>
                            <td colspan="5"></td>
                            <td>
                                <button type="button" class="add-item btn btn-success btn-md">
                                    <span class="fa fa-plus"></span> New
                                </button>

                            </td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
        <?php DynamicFormWidget::end(); ?>
    </div>

请参阅此表&lt; strong>

现在,我的情况是,这个表我将把所有tbody html作为普通表格html并将其复制到我在bootstrap的模态中创建的表格中。 问题是,有两个选择选项,我需要它们的值

    <?php
  Modal::begin([
    'header' => 'Form Bayar',
    'footer' => Html::submitButton($model->isNewRecord ? 'Bayar' : 'Update', ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']),
    'id' => 'modal',
    'size' => 'modal-lg',
    'clientOptions' => ['backdrop' => 'static', 'keyboard' => FALSE]
  ]);
?>

 <div id='modalContent'>
     <div class="row">
         <div class="col-md-12">
         <h4>Hair Deeper Salon</h4>
             <p>Boulevard raya Tn 2 No 8<br><small>Kelapa Gading Permai Jakarta Utara, Ph: 08979613057</small></p>
             <table class="table table-bordered" id="table-struk">
                 <thead>
                    <tr>
                      <th style="width: 30%">Item</th>
                      <th style="width: 15%">By</th>
                      <th style="width: 18%">Harga</th>
                      <th style="width: 8%">Qty</th>
                      <th style="width: 25%">Sub Total</th>
                      <th class="text-center" style="width: 5%">Act</th>
                   </tr>
                 </thead>

                 <tbody>
             ----   ADD ITEM HERE        ----
                 </tbody>

                 <tfoot>
                   <tr>
                     <td colspan="3"></td>
                     <td>All Item:</td>
                     <td></td>
                   </tr>
                   <tr>
                     <td>Kasir 1</td>
                     <td colspan="2"></td>
                     <td>Total Pay :</td>
                     <td></td>
                   </tr>
                   <tr>
                     <td colspan="3"></td>
                     <td>Customer Pay :</td>
                     <td></td>
                   </tr>
                   <tr>
                     <td colspan="3"></td>
                     <td>Back :</td>
                     <td></td>
                   </tr>
                  </tfoot>
               </table>
          </div>
       </div>
      </div>
     <?php Modal::end(); ?>

有可能吗?

到目前为止,我使用的是这个js,但并不像预期的那样:

 $this->registerJs("$('#modal').on('show.bs.modal', function (e) {
        var contentStruk =  $('.container-items tbody').remove().html();
        $('#table-struk > tbody').after(contentStruk);

                                   })", yii\web\View::POS_READY);
                ?>

已更新

现在,到目前为止,我已经将它们添加到模态中,但只是第一行。 像这样 : SO far

我的代码看起来像这样:

$('#modal').on('show.bs.modal', function (e) {

  var contentStruk =  $('.container-items tbody td:not(:last-child)').val('option:selected');
  $('#table-struk > tbody').after(contentStruk);

})

但如果表格有多行,那就太乱了。

0 个答案:

没有答案