╃巡洋艦㊣ 2015-07-24 11:21:26 22903次浏览 7条评论 42 13 0

这是一个如何在 Yii2 的 GridView 和 ActiveForm 扩展中使用 Pjax 的例子。

这个例子使用一个数据库表 "countries" 字段为 id, name。

控制器

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,
    ]);
}

视图

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>

英文版:http://www.yiiframework.com/wiki/772/pjax-on-activeform-and-gridview-yii2/

觉得很赞
  • 评论于 2015-07-30 16:09 举报

    但是这个东西好像有问题。
    我测试了一下。
    有时会出现不能正常局部刷新的现象。他确实去刷新了,但是得到的结果不是当前的最新数据,而是以前的数据。

    实测,刷新的页面是以前缓存的。 部分浏览器。。还是有firefox吧。

    1 条回复
    评论于 2015-12-03 17:25 回复

    我也试了,挺成功的,包括火狐 我也成功了 ,而且是最新数据不是浏览器缓存的

  • 评论于 2015-12-03 17:26 举报

    谢谢 分享 点赞!

  • 评论于 2016-10-03 09:44 举报

    大神们,没看明白,麻烦解释一下,pjax在GritView和ActiveForm这起什么作用?

    1 条回复
    评论于 2016-10-03 09:50 回复

    刚有仔细看了一下,这个例子是不是表单提交后,gridview通过pjax局部更新数据?

  • 评论于 2017-02-14 13:03 举报

    是一种很好的思路,

  • 评论于 2017-03-31 17:09 举报

    确实很棒,无页面刷新实现数据提交和列表数据自动更新!上两张图看下效果:

    pjax01.jpg
    上图中,蓝框是要提交的表单内容,注意看一下页面中的红框,那是当前的时间戳。

    pjax02.jpg
    上图中,蓝框是表单提交后内容自动在列表中刷新出来了,注意看一下页面中的红框,此前的时间戳没有变更,说明页面没有重载,只是使用Pjax做的局部刷新!

    1 条回复
    评论于 2017-08-31 17:43 回复

    代码和楼主的代码一样的,但是我的还是会重新加载页面,并不是局部刷新列表

  • 评论于 2017-04-01 10:17 举报

    有个问题请教一下:

    ['name', 'unique'],
    

    这个验证该如何在Pjax里实现?
    我改成这样了,好象是不行:

            $model = new Country();
            if ($model->load(Yii::$app->request->post())){
                if (Yii::$app->request->isAjax) {
                    Yii::$app->response->format = \yii\web\Response::FORMAT_JSON;
                    return \yii\widgets\ActiveForm::validate($model);
                }
                if($model->save()){
                    $model = new Country();
                }
            }
    

    请指点,谢谢!

  • 评论于 2017-09-25 10:13 举报

    哈哈哈,get了

您需要登录后才可以评论。登录 | 立即注册