如何使用 Yii 2 中更新表单下拉列表的选定值数据填充嵌套动态表单字段

问题描述 投票:0回答:0

我在 Yii 2 中使用动态表单小部件来实现嵌套动态表单。我有一个表格,允许用户每次选择 ASC 中心并添加学生数据。该场景是用户从下拉列表中选择 ASC 中心。选择 ASC 中心后,名为 StudentList 的函数将返回所选 ASC 中心的学生。现在这些学生正在正确填充。

我为学生输入字段分配了一个类,并使用 jquery 的每个函数用 StudentList 函数返回的数据填充所有学生字段。这对于创建操作是正确的

但是在更新时它会导致问题,比如所有学生都显示在加载的字段中。如图所示,这是更新页面并加载了学生数据,但是当用户单击已加载学生数据的下拉列表时,将显示所有学生。

下面是 StudentList 函数,它返回特定 ASC 中心的学生列表。

public function actionStudentLists($id)
    {
        $countstudents = Student::find()->where(['ASCId' => $id])->count();//Counts number of students

        $Students = Student::find()->where(['ASCId' => $id])->all(); // Execute students for ASCId

        if ($countstudents > 0) {

        echo "<option value>Select Students</option>";  

            foreach ($Students as $Student) {
        ob_start();

             echo "<option value='" . $Student->StudentId . "'>" . $Student->StudentName . "</option>";
            }
        } else {
            echo "<option> - </option>";
        }
    }

下面是_form.php

<?php
use yii\helpers\Html;
use yii\bootstrap\ActiveForm;
use yii\jui\DatePicker;

use wbraganca\dynamicform\DynamicFormWidget;
use app\models\Ascassignment;
use app\models\Asccenter;
use kartik\time\TimePicker;
use yii\helpers\ArrayHelper;
use app\models\Student;
?>

<script>
$(function () {

$(document).ready(function() {
  $(window).keydown(function(event){
    if(event.keyCode == 13) {
      event.preventDefault();
      return false;
    }
  });
});

$("#dynamic-form")[0].reset();

});

// When the user clicks on Add Student button
$(document).ready(function(){
 $(".dynamicform_student").on("afterInsert", function(e, item) {
    const $i = $(item).find('.i');

    $.post("index.php?r=student/student-lists&id="+$("select#ascteacherreport-ascid").val(),function(data){
 $i.html(data);
        });

    });
});


//When the user clicks on Add Time button
$(document).ready(function(){
    $(".dynamicform_wrapper").on("afterInsert", function(e, item) {
        const $i = $(item).find('.i');

       $.post("index.php?r=student/student-lists&id="+$("select#ascteacherreport-ascid").val(),function(data){

     $i.html(data);

});
// When the user clicks on Add Student button
$(".dynamicform_student").on("afterInsert", function(e, item) {
    const $i = $(item).find('.i');

    $.post("index.php?r=student/student-lists&id="+$("select#ascteacherreport-ascid").val(),function(data){
 $i.html(data);
        });

    });
    });
});
</script>



<div class="ascteacherreport-form">

   <?php $form = ActiveForm::begin(['id' => 'dynamic-form',  'options' => ['class' => 'disable-submit-buttons'],
   ]);?>

   <div class="panel panel-primary " >
<div class="panel panel-heading"><font size="3"><b>Teacher Report</b></font></div>
<div class="row">
<div class="col-sm-4">

    <?= $form->field($model, 'ASCId')->dropDownList(ArrayHelper::map(Asccenter::find()->leftJoin('ascassignment','`ascassignment`.`ASCId`=`asccenter`.`ASCId`')->where(['ascassignment.UserId' => \Yii::$app->user->identity->getonlyid()])->all(),'ASCId','ASCName'), ['prompt' => 'Select ASC Center','class'=>'form-control ascid','onChange' => '

    $.post("index.php?r=student/student-lists&id=' . '"+$(this).val(),function(data){

         $(".i").each(function(k,v)
        {
            $(".i").html(data);

        }
        );

    });
    '
    ]) ?>
    </div>

<div class="col-sm-4">

    <?= $form->field($model, 'DateofReport')->widget(DatePicker::classname(), [
        //'language' => 'ru',
    'dateFormat' => 'yyyy-MM-dd',
        'options' => ['class' => 'form-control picker','readOnly'=>'readOnly'],                                              'clientOptions'=>['changeMonth'=>true,
                                            'changeYear'=>true,
                                            'readOnly'=>true]

]) ?>
</div>
    </div>
    </div>



<div class="panel panel-primary">
        <div class="panel-heading"><font size="3"><b>Time and Student Details</b></font></div>
<?php DynamicFormWidget::begin([
        'widgetContainer' => 'dynamicform_wrapper',
        'widgetBody' => '.container-items',
        'widgetItem' => '.time-item',
        'limit' =>10,
        'min' => 1,
        'insertButton' => '.add-time',
        'deleteButton' => '.remove-time',
        'model' => $modelsTime[0],
        'formId' => 'dynamic-form',
        'formFields' => [
            'FromTime',
            'ToTime'
        ],
    ]); ?>
    <table class="table table-bordered">
        <thead>
            <tr bgcolor='#B8B8B8'>
            <th style='border: 1px solid black;'></th>
               <th class ="text-center" style='border: 1px solid black;'>Time</th>
                <th class ="text-center" style='border: 1px solid black;'>Student Details</th>
                <th class="text-center" style='border: 1px solid black;'>
                    <button type="button" class="add-time btn btn-success btn-xs"><span class="fa fa-plus"></span> Add Time</button>
                </th>
            </tr>
        </thead>
        <tbody class="container-items">
        <?php foreach ($modelsTime as $indexTime => $modelTime): ?>
            <tr class="time-item">
                <td class="vcenter" style='border: 1px solid black;'>
                    <?php
                        // necessary for update action.
                        if (! $modelTime->isNewRecord) {
                            echo Html::activeHiddenInput($modelTime, "[{$indexTime}]ASCReportDetailsId");
                        }
                    ?>
                    </td>
                    <td style='border: 1px solid black;width:15%'>


                    <?=  $form->field($modelTime, "[{$indexTime}]FromTime")->label(true)->widget(TimePicker::classname(),[

    'pluginOptions' => [
        'readOnly' => true,
        'minuteStep' => 1,
    ],
])?><br>

                <?=
                    $form->field($modelTime, "[{$indexTime}]ToTime")->label(true)->widget(TimePicker::classname(),[

    'pluginOptions' => [
        'readOnly' => true,
        'minuteStep' => 1,
    ],
])?>



                </td>

                <td style='border: 1px solid black;'>
                    <?= $this->render('_form-studentdata', [
                        'form' => $form,
                        'indexTime' => $indexTime,
                        'modelsStudentdata' => $modelsStudentdata[$indexTime],
                    ]) ?>


                </td>

                <td class="text-center vcenter" style='border: 1px solid black;'>
                    <button type="button" class="remove-time btn btn-danger btn-xs"><span class="fa fa-minus"></span></button>
                </td>
            </tr>
         <?php endforeach; ?>
        </tbody>
    </table>
    <?php DynamicFormWidget::end(); ?>

</div>

    <div class="form-group">
         <?= Html::submitButton($model->isNewRecord ? 'Create' : 'Update', ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?>

    </div>

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

</div>

下面是嵌套的表格_form-studentdata.php

<?php

use yii\helpers\Html;
use yii\helpers\ArrayHelper;
use yii\bootstrap\ActiveForm;
//use nex\datepicker\DatePicker;
use yii\web\UploadedFile;
use wbraganca\dynamicform\DynamicFormWidget;
use app\models\Student;
?>


<?php DynamicFormWidget::begin([
    'widgetContainer' => 'dynamicform_student',
    'widgetBody' => '.container-student',
    'widgetItem' => '.student-item',
    'limit' => 50,
    'min' => 1,
    'insertButton' => '.add-student',
    'deleteButton' => '.remove-student',
    'model' => $modelsStudentdata[0],
    'formId' => 'dynamic-form',
    'formFields' => [
        'StudentId',
        'Subject',

        'Topic',
        'Confidence',
    ],
]); ?>
<table class="table table-bordered">
    <thead>
        <tr bgcolor='#B8B8B8'>
            <th style='border: 1px solid black;'></th>
                <th class ="text-center" style='border: 1px solid black;'>Student</th>
                <th class ="text-center" style='border: 1px solid black;'>Subject</th>
                <th class ="text-center" style='border: 1px solid black;'>Topic</th>
                                <th class ="text-center" style='border: 1px solid black;'>Confidence</th>


            <th class="text-center" style='border: 1px solid black;'>
                <button type="button" class="add-student btn btn-success btn-xs"><span class="glyphicon glyphicon-plus"></span> Add Student</button>
            </th>
        </tr>
    </thead>
    <tbody class="container-student">
    <?php foreach ($modelsStudentdata as $indexStudent => $modelStudentdata): ?>
        <tr class="student-item">
            <td class="vcenter" style='border: 1px solid black;'>
                <?php
                    // necessary for update action.
                    if (! $modelStudentdata->isNewRecord) {
                        echo Html::activeHiddenInput($modelStudentdata, "[{$indexTime}][{$indexStudent}]ASCTeacherReportTimeDetailsId");
                    }
                ?>
                </td>
                <td style='border: 1px solid black; width:30%'>
                <?= $form->field($modelStudentdata, "[{$indexTime}][{$indexStudent}]StudentId")->label(false)->dropDownList(ArrayHelper::map(Student::find()->all(),'StudentId','StudentName'), ['prompt' => 'Select Student','class'=>'form-control i']) ?>
            </td>
            <td style='border: 1px solid black; width:30%'>
                <?= $form->field($modelStudentdata, "[{$indexTime}][{$indexStudent}]Subject")->label(false)->textInput(['maxlength' => true]) ?>
            </td>
            <td style='border: 1px solid black; width:30%'>
                <?= $form->field($modelStudentdata, "[{$indexTime}][{$indexStudent}]Topic")->label(false)->textInput(['maxlength' => true]) ?>
            </td>

            <td style='border: 1px solid black; width:30%'>
                <?= $form->field($modelStudentdata, "[{$indexTime}][{$indexStudent}]Confidence")->label(false)->textInput(['maxlength' => true]) ?>
            </td>
            <td class="text-center vcenter" style=" border: 1px solid black;width: 90px;">
                <button type="button" class="remove-student btn btn-danger btn-xs"><span class="glyphicon glyphicon-minus"></span></button>
            </td>
        </tr>
     <?php endforeach; ?>
    </tbody>
</table>

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

当前图像:图像显示了从数据库加载数据的更新表单,但是当单击学生字段的下拉列表时,将显示所有学生。只有选定的 ASC 中心的学生应该显示在加载的学生字段中。

Update Form

javascript php jquery yii2
© www.soinside.com 2019 - 2024. All rights reserved.