Question

我想用jquery创建动态字段而不使用任何库。我有两个提交表格，但有一个提交label我想创建多个时间，这实际上是问题选项，它可能超过一次。

在下面的form.php中，您会看到label field我多次使用jquery创建。我可以保存它们，但我不明白我将如何在update case中显示那些已经超过一次的文件。真的很抱歉我的英语。

控制器

public function actionCreate()
    {
      $model = new QuestionsOptions();

     if ($model->load(Yii::$app->request->post())) {
           if(sizeof(array_filter($_POST['QuestionsOptions']['label'])) > 0){
             foreach($_POST['QuestionsOptions']['label'] as $key => $row){
                  $model->setIsNewRecord(true);
                  $model->option_id = null;
                  $model->label = $row;
                  $model->save();
             } 
          }
         // exit;
            return $this->redirect(['view', 'id' => $model->option_id]);
        } else {
            return $this->renderAjax('create', [
                'model' => $model,
            ]);
        }
    }

模型

namespace app\models;
use Yii;

class QuestionsOptions extends \yii\db\ActiveRecord
{
    public static function tableName()
    {
        return 'questions_options';
    }
    public function rules()
    {
        return [
            [['question_id', 'label', 'type'], 'required'],
            [['question_id'], 'integer'],
            [['type'], 'string'],
            [['dated', 'updated'], 'safe'],
            [['label'], 'string', 'max' => 255],
            [['question_id'], 'exist', 'skipOnError' => true, 'targetClass' => SurveysQuestions::className(), 'targetAttribute' => ['question_id' => 'question_id']],
        ];
    }
    public function attributeLabels()
    {
        return [
            'option_id' => 'Option ID',
            'question_id' => 'Question ID',
            'label' => 'Label',
            'type' => 'Type',
            'dated' => 'Dated',
            'updated' => 'Updated',
        ];
    }
    public function getQuestionsAnswers()
    {
        return $this->hasMany(QuestionsAnswers::className(), ['option_id' => 'option_id']);
    }
    public function getQuestion()
    {
        return $this->hasOne(SurveysQuestions::className(), ['question_id' => 'question_id']);
    }
}

form.php的

<?php

use yii\helpers\Html;
use yii\widgets\ActiveForm;

?>

<div class="surveys-questions-form">

    <?php $form = ActiveForm::begin(); ?>

    <?php

        if(isset($_GET['option_id']) and $_GET['option_id'] > 0)
            $id= $_GET['option_id'];
        else 
            $id= $model->option_id;
        echo $form->field($model, 'question_id')->hiddenInput(['value' => $id])->label(false);
    ?>

   <div class="col-md-6">
    <div id="question_wrapper">
        <?= $form->field($model, 'type')->dropDownList([ 'text' => 'Text', 'numbers' => 'Numbers', 'date' => 'Date', 'texarea' => 'Texarea', 'checkbox' => 'Checkbox', 'radio' => 'Radio', 'rating' => 'Rating', ], ['prompt' => '']) ?>
        <div id="add_more_field">
            <?= $form->field($model, 'label[]')->textInput(['maxlength' => true]) ?>

        </div>
        <div class="form-group">
            <?php
                echo Html::a('Add more', 'javascript:void(0);', [
                    'id' => 'surveys-questions-new-button', 
                    'class' => 'pull-right btn btn-primary btn-xs'
                ])
            ?>
        </div>
    </div>
   </div>
    <div class="col-md-12">
    <div class="form-group">
        <?= Html::submitButton($model->isNewRecord ? 'Create' : 'Update', ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?>
    </div>
     </div>
    <?php ActiveForm::end(); ?>

</div>
<?php
$script = <<< JS
$(document).ready(function(){

    $('#surveys-questions-new-button').on('click', function () {
        $("#add_more_field").clone().appendTo("#question_wrapper"); 
    });

}); 

JS;
$this->registerJs($script);
?>

也许其他事情在我的代码中也不对，请建议我，我真的很想得到帮助。

Answer 1

我几乎无法改进和修改您的代码：

创建可加载动态添加的选项/标签的QuestionOptionsForm。使用此模型迭代选项（可以从请求或数据库加载）。不要使用$_GET['option_id']之类的语句（特别是在视图中）。
在表单上添加新选项（动态）时，请为字段名称添加整数索引。例如label[45]。我通常使用特殊的html模板替换。使用这种方式代替克隆现有行。例如：
```
<div class="js-new-option-template">
    <input type="text" name="option[{{OPTION_ID}}][label]"/>
    <input type="hidden" name="option[{{OPTION_ID}}][is_new_option]"/>
</div>
```
注意：您需要将现有选项ID与JS代码中生成的动态分开。您可以使用is_new_option隐藏字段。
还原现有选项时，请使用其ID对其进行索引。

然后，当您迭代选项时，为现有选项加载模型，并为动态生成创建新模型。

// ...
foreach ($modelForm->options as $optionId => $optionData) {

    // Prepare data
    $isNewModel     = \yii\helpers\ArrayHelper::getValue($optionData, 'is_new_option', true);
    $optionLabel    = \yii\helpers\ArrayHelper::getValue($optionData, 'label');
    $optionQuestion = \yii\helpers\ArrayHelper::getValue($optionData, 'question_id');

    // Create or find options model
    $modelOption = $isNewModel
        ? new QuestionsOptions()
        : QuestionsOptions::findOne($optionId);

    if (!$modelOption) {
        throw new \yii\web\NotFoundHttpException('Cannot be found option record with the id = ' . $optionId);
    }

    // Populate and save model
    $modelOption->label       = $optionLabel;
    $modelOption->question_id = $optionQuestion;  // foreign key

    if (!$modelOption->save()) {
        throw new \yii\base\Exception('Cannot be saved new option record.');
    }
}

如有必要，您可以删除已在表单上删除的数据库选项。

如何在yii2中更新动态字段

1 个答案: