แนวทางการทำ Pjax ใน Yii2


แนวทางการทำ Pjax ใน Yii2

Programmer Thailand Blog พบบทความข่าวสารดีๆ เขียนและแชร์ได้ทันที

beta version

แนวทางการทำ Pjax ใน Yii2

ในบทความนี้จะเล่าถึงการทำ Pjax ใน Yii2 ก่อนอื่นก็คงต้องตอบคำถามนี้ก่อน "Pjax คืออะไร" Pjax คือ jQuery PlugIn ที่ใช้ pushstate+Ajax นั่นเอง แล้ว "pushState คืออะไร" เจ้า pushState เป็น Method หนึ่งที่ใช้ในการเพิ่ม History เข้าไปในรายการของ History ทั้งหมด โดย Ajax ไม่มีการเปลี่ยนหน้าซึ่งจะกำหนด History ได้ยาก จึงแก้ไขโดยการใช้ Method pushState นั่นเอง (มีใน HTML 5 นะฮาฟ) ซึ่ง Method นี้เป็นส่วนหนึ่งของ History API

 

        .--.
       /    \
      ## a  a
      (   '._)
       |'-- |
     _.\___/_   ___pjax___
   ."\> \Y/|<'.  '._.-'
  /  \ \_\/ /  '-' /
  | --'\_/|/ |   _/
  |___.-' |  |`'`
    |     |  |
    |    / './
   /__./` | |
      \   | |
       \  | |
       ;  | |
       /  | |
 jgs  |___\_.\_
      `-"--'---'

pjax = pushState + ajax

เอาล่ะก็รู้จักคร่าวๆ ล่ะครับไปดู Concept สำหรับ Yii Framework กันได้เลย

Controller

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

View

index.php

<?php
 
use yii\helpers\Html;
use yii\grid\GridView;
use yii\widgets\Pjax;
 
/* @var $this yii\web\View */
/* @var $searchModel app\models\CountriesSearch */
/* @var $dataProvider yii\data\ActiveDataProvider */
 
$this->title = Yii::t('app', 'Countries');
$this->params['breadcrumbs'][] = $this->title;
?>
<div class="countries-index">
 
    <h1><?= Html::encode($this->title) ?></h1>
    <?php // echo $this->render('_search', ['model' => $searchModel]); ?>
 
    <p>
        <?= Html::a(Yii::t('app', 'Create {modelClass}', [
    'modelClass' => 'Countries',
]), ['create'], ['class' => 'btn btn-success']) ?>
    </p>
 
<!-- Render create form -->    
    <?= $this->render('_form', [
        'model' => $model,
    ]) ?>
 
 
<?php Pjax::begin(['id' => 'countries']) ?>
    <?= GridView::widget([
        'dataProvider' => $dataProvider,
        'filterModel' => $searchModel,
        'columns' => [
            ['class' => 'yii\grid\SerialColumn'],
            'id',
            'name',
            ['class' => 'yii\grid\ActionColumn'],
        ],
    ]); ?>
<?php Pjax::end() ?>
</div>

_form.php

<?php
 
use yii\helpers\Html;
use yii\widgets\ActiveForm;
 
/* @var $this yii\web\View */
/* @var $model app\models\Countries */
/* @var $form yii\widgets\ActiveForm */
?>
 
<?php
 
$this->registerJs(
   '$("document").ready(function(){ 
        $("#new_country").on("pjax:end", function() {
            $.pjax.reload({container:"#countries"});  //Reload GridView
        });
    });'
);
?>
 
<div class="countries-form">
 
<?php yii\widgets\Pjax::begin(['id' => 'new_country']) ?>
<?php $form = ActiveForm::begin(['options' => ['data-pjax' => true ]]); ?>
 
    <?= $form->field($model, 'name')->textInput(['maxlength' => 200]) ?>
 
 
    <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 yii\widgets\Pjax::end() ?>
</div>

 

มานพ กองอุ่น

มานพ กองอุ่น
admin

  • 2 เพื่อน
  • 13 ผู้ติดตาม
  • 766 โพสต์