javascript - 添加新列表选项，动态刷新更新列表

Question

我正在尝试使用 Yii2 制作一个项目来学习它。

我有一个包含一些列表的表格。我想实现一个在旅途中添加新列表选项的功能。

当前单击“添加新选项”按钮调用弹出窗体。提交后，Yii 将我带到这个新选项的页面。原因如下:

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

    if ($model->load(Yii::$app->request->post()) && $model->save()) {
        return $this->redirect(['view', 'id' => $model->id]);
    } else {
        return $this->render('create', [
            'model' => $model,
            'manager' => Stuff::find()->all(),
            'movercompany' => MoverCompany::find()->all(),
            'worktype' => Worktype::find()->all(),
            'customer' => Customer::find()->all(),
        ]);
    }
}

提交后我想要的只是刷新更新列表并选择新选项。

我该怎么做？

_form.php:

<?php

use yii\helpers\Html;
use yii\helpers\ArrayHelper;
use yii\helpers\Url;
use yii\widgets\ActiveForm;
use kartik\select2\Select2;
use yii\bootstrap\Modal;

/* @var $this yii\web\View */
/* @var $model app\models\Request */
/* @var $form yii\widgets\ActiveForm */
?>

<div class="request-form">

    <?php 
        $form = ActiveForm::begin();
        date_default_timezone_set("Europe/Moscow");
        $model->request_date = date('Y-m-d');
        $model->request_time = date('H:i');
    ?>

    <?= $form->field($model, 'request_date')->widget(\yii\jui\DatePicker::classname(), [
        'language' => 'ru',
        'dateFormat' => 'yyyy-MM-dd',
    ]) ?>

    <?= $form->field($model, 'request_time')->textInput(['style' => 'width: 70px;']) ?> 

    <?= $form->field($model, 'customer_id')->widget(Select2::classname(), [
        'data' => ArrayHelper::map($customer, 'id', 'fullInfo'),
        'language' => 'ru',
        'options' => ['placeholder' => 'Выбрать клиента...'],
        'pluginOptions' => [
            'allowClear' => true
        ],
    ]);?>

    <?= $form->field($model, 'KP_id')->textInput() ?>


    <?= $form->field($model, 'quantity')->input('number', ['style' => 'width: 75px;']) ?>
    <div>

        <?= $form->field($model, 'request_type')->dropDownList(
            ArrayHelper::map($worktype, 'id', 'title'),
            array('prompt' => 'Выберите вид работ:', 'style' => 'width: 200px;')
        ) ?>

        <?= Html::button('+', ['value' => Url::to('index.php?r=worktype/create'), 'class' => 'btn btn-success', 'id' => 'modalButton']) ?>

    </div>
    <?php
        Modal::begin([
                'header' => '<h4>Виды работ</h4>',
                'id' => 'modal',
                'size' => 'modal-lg',
            ]);
        echo "<div id='modalContent'></div>";
        Modal::end();
    ?>

    <?= $form->field($model, 'payment_type')->dropDownList(
        [
            '0' => 'Нал',
            '1' => 'Безнал'
        ], 
        ['style' => 'width: 80px;']) 
    ?>

    <?= $form->field($model, 'address')->textarea(['rows' => 2]) ?>

    <?= $form->field($model, 'minimal_payment')->input('number', ['style' => 'width: 100px;']) ?>

    <?= $form->field($model, 'mover_company_id')->dropDownList(
        ArrayHelper::map($movercompany, 'id', 'name'),
        array('prompt' => 'Выберите компанию:', 'style' => 'width: 200px;')
    ) ?>

    <?= $form->field($model, 'manager_id')->dropDownList(
        ArrayHelper::map($manager, 'id', 'name'),
        array('prompt' => 'Выберите менеджера:', 'style' => 'width: 200px;')
    ) ?>

    <?= $form->field($model, 'workers_number')->input('number', ['style' => 'width: 100px;']) ?>

    <?= $form->field($model, 'workhours')->input('number', ['style' => 'width: 100px;']) ?>

    <?= $form->field($model, 'payment_additional')->input('number', ['style' => 'width: 100px;']) ?>

    <?= $form->field($model, 'payment_car')->input('number', ['style' => 'width: 100px;']) ?>

    <?= $form->field($model, 'payment_sum')->input('number', ['style' => 'width: 100px;']) ?>

    <?= $form->field($model, 'status')->dropDownList(
        [
            '0' => 'Открыт',
            '1' => 'Закрыт'
        ],
        ['style' => 'width: 200px;'] 
    ) ?>

    <?= $form->field($model, 'comment')->textarea(['rows' => 2]) ?>

    <div class="form-group">
        <?= Html::submitButton($model->isNewRecord ? 'Создать' : 'Обновить', ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?>
    </div>

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

</div>

Answer 1

我已经使用后续技术实现了这一点。

我需要在申请表页面上向公司列表动态添加一个选项。

1. 因此，首先我们在 Company Controller 中创建新操作。它与 renderAjax 而不是 render 的 actionCreate 不同，它返回 1 而不是将您带到新的公司页面:

   公共(public)函数 actionAdd(){ $model = new Company();

   if ($model->load(Yii::$app->request->post()) && $model->save()) {
       echo 1;
   } else {
       return $this->renderAjax('create', [
           'model' => $model,
       ]);
   };
   

2. 将按钮添加到包含公司列表的 View 的 _form.php:

   Url::to('index.php?r=company/add'), 'class' => 'btn btn-success', 'id' => 'modalButton']) ?>

3. 添加包含用于创建新公司的表单的弹出窗口。

3.1。 _form.php 中的模态窗口:

use yii\bootstrap\Modal;
use yii\widgets\Pjax;

<?php
    Modal::begin([
        'header' => '<h4>Company<h4>',
        'id' => 'modal',
        'size' => 'modal-lg',
    ]);

    echo "<div id='modalContent'></div>";

    Modal::end();
?>

3.2。将 pjax 应用于公司列表:

<?php Pjax::begin(['id' => 'companyList']); ?>
...
<?php Pjax::end(); ?>

3.3。编辑 Assets /AppAsset.php:

public $js = [
    'js/main.js'
];

3.4。创建文件夹和js文件web/js/main.js:

$(function(){
    $('#modalButton').click(function(){
        $('#modal').modal('show')
            .find('#modalContent')
            .load($(this).attr('value'));
    });
});

3.5。将脚本添加到公司 View _form.php:

<?php

$script = <<< JS

$('form#{$model->formName()}').on('beforeSubmit', function(e)
{
    var \$form = $(this);
    $.post(
        \$form.attr("action"), // serialize yii2 form
        \$form.serialize()
    )
        .done(function(result) {
        if(result == 1)
        {
            $(document).find('#modal').modal('hide');
            $.pjax.reload({container:'#companyList'});
            $(document).on('pjax:complete', function() {
              $('#customer-company_id option:last-child').attr('selected', true);
            })
        }else
        {
            $(\$form).trigger("reset");
            $("#message").html(result.message);
        }
        }).fail(function()
        {
            console.log("server error");
        });
    return false;
});

JS;

$this->registerJs($script);

?>

这就是我们所拥有的:按下“添加”按钮会弹出一个带有新选项属性的表单。提交此表单将关闭弹出窗口，刷新公司列表并选择最后一个新选项。非常粗鲁，但它确实有效。