添加新的列表选项,动态刷新更新后的列表

Adding new list options, refreshing updated list dynamically

本文关键字:列表 更新 动态刷新 选项 添加      更新时间:2023-09-26

我正在通过尝试使用它制作一个项目来学习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>

我已经使用next技术实现了这个。

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

  1. 所以首先我们在公司控制器中创建新的动作。它不同于actionCreate由renderAjax而不是渲染和返回1,而不是带你到新的公司页面:

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

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

    }

  2. 在包含公司列表的视图的_form.php中添加按钮:

    Url:: (index . php ? r =公司/添加),"类"=>"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。编辑资产/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。添加脚本到公司视图_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);
?>

这是我们所拥有的:按下添加按钮弹出一个带有新选项属性的表单。提交此表单关闭弹出窗口,刷新公司列表并选择新选项,这是最后一个。