5 нояб. 2017 г.

Yii2:Работа Pjaxa с Activform и Gridview

image

В фреймворке Yii 2.0 встроена поддержка jquery плагина pjax, объединяющего pushState и ajaxтехнологии. Подробнее на гитхабе разработчика.

Для примера сделаем возможность добавления новой Заметки в списке заметок без перезагрузки страницы.

Контроллер

 public function actionIndex()
    {
        $model = new Notes();
        if ($model->load(Yii::$app->request->post()) && $model->save())
        {
            $model = new Notes();
        }
        $searchModel = new NotesSearch();
        $dataProvider = $searchModel->search(Yii::$app->request->queryParams);
 
        return $this->render('index', [
            'searchModel' => $searchModel,
            'dataProvider' => $dataProvider,
            'model' => $model,
        ]);
    }

Шаблоны

index.php

<?php
 
use yii\helpers\Html;
use yii\widgets\Pjax;
use yii\grid\GridView;
 
/* @var $this yii\web\View */
/* @var $searchModel app\modules\notes\models\NotesSearch */
/* @var $dataProvider yii\data\ActiveDataProvider */
 
$this->title = Yii::t('app', 'Notes');
$this->params['breadcrumbs'][] = $this->title;
?>
<div class="notes-index">
 
    <h1><?= Html::encode($this->title) ?></h1>
 
    <?= $this->render('_form',[
        'model' => $model,
    ]) ?>
 
<?php Pjax::begin(['id' => 'notes']) ?>
    <?= GridView::widget([
        'dataProvider' => $dataProvider,
        'filterModel' => $searchModel,
        'columns' => [
            ['class' => 'yii\grid\SerialColumn'],
 
            'id',
            'note:ntext',
            ['class' => 'yii\grid\ActionColumn'],
        ],
    ]); ?>
<?php Pjax::end() ?>

_form.php

<?php
 
use yii\helpers\Html;
use yii\widgets\ActiveForm;
 
/* @var $this yii\web\View */
/* @var $model app\modules\notes\models\Notes */
/* @var $form yii\widgets\ActiveForm */
?>
 
<?php
    $this->registerJs(
        '$("document").ready(function(){
            $("#new_note").on("pjax:end", function() {
            $.pjax.reload({container:"#notes"});  //Reload GridView
        });
    });'
    );
?>
 
<div class="notes-form">
<?php yii\widgets\Pjax::begin(['id' => 'new_note']) ?>
    <?php $form = ActiveForm::begin(['options' => ['data-pjax' => true]]); ?>
 
    <?= $form->field($model, 'note')->textarea(['rows' => 6]) ?>
 
    <div class="form-group">
        <?= Html::submitButton($model->isNewRecord ? Yii::t('app', 'Create') : Yii::t('app', 'Update'), ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?>
    </div>
 
    <?php ActiveForm::end(); ?>
    <?php Pjax::end(); ?>

Результат

 

Что мы сделали

1. В действии actionIndex добавили сохранение данных новой Заметки, если они пришли в запросе post:

if ($model->load(Yii::$app->request->post()) && $model->save())
        {
            $model = new Notes();
        }

2. Обернули виджеты GridView и ActionForm в пиджак:

<?php Pjax::begin(['id' => 'notes']) ?>
<?php yii\widgets\Pjax::end(); ?>

3. Добавили небольшой скрипт, обновляющий GridView после добавления новой записи:

<?php
    $this->registerJs(
        '$("document").ready(function(){
            $("#new_note").on("pjax:end", function() {
            $.pjax.reload({container:"#notes"});  //Reload GridView
        });
    });'
    );
?>