您现在的位置是:网站首页>>PHP>>Yii

Yii 使用pjax

发布时间:2019-08-05 17:29:40作者:wangjian浏览量:36点赞量:0

    之前我们已经简单的学习过了pjax:https://www.wj0511.com/site/detail.html?id=353,今天我们来学习下在Yii框架中使用pjax,Yii自带了pjax,使用起来十分的方便

    一:简单实现pjax

    view:

    <?php
    use yii\widgets\Pjax;
    use yii\bootstrap\Html;
    ?>
    <?php Pjax::begin([
        'enablePushState' => false,//更新数据保持url不变
        'timeout' =>5000//超时时间
    ]); ?>
    <?= Html::a("点击事件", ['pjax/pjax'], ['class' => 'btn btn-lg btn-primary']) ?>
    <h1>刷新的时间为: <?= $time ?></h1>
    <?php Pjax::end(); ?>

    controller:

    public function actionPjax()
    {
    return $this->render('pjax', ['time' => date('Y-m-d H:i:s')]);
    }

    根据如上代码可以实现:

    当点击点击事件按钮时,刷新的时间数据发生变化,页面不会进行刷新

    二:form表单提交数据pjax实现

    view:

    <?php
    use yii\widgets\Pjax;
    use yii\bootstrap\Html;
    ?>
    <?php Pjax::begin([
        'enablePushState' => false,//更新数据保持url不变
        'timeout' =>5000//超时时间
    ]); ?>
    <?=Html::beginForm(
            ['pjax/form-pjax'],//from表单提交地址
            'post',//提交方式
            ['data-pjax' => '']//使用pjax形式提交数据
    )?>
    <?=Html::textInput('data')?>   <!--输入框-->
    <?=Html::submitButton('按钮')?>  <!--按钮-->
    <?= Html::endForm()?>
    <h2>输入的数据为:<?= $data ?></h2>
    <?php Pjax::end();?>

    controller:

    public function actionFormPjax()
    {
        $data = Yii::$app->request->post('data', '');
        return $this->render('form-pjax', [
            'data' => $data
        ]);
    }

    根据如上代码可以实现:

    当点击按钮时,输入的数据根据你输入的数据发生变化,页面不会进行刷新

    三:pjax+GridView实现分页操作

    view:

    <?php
    use yii\widgets\Pjax;
    use yii\grid\GridView;
    ?>
    <?php Pjax::begin([
            'enablePushState' => false,//更新数据保持url不变
            'timeout' =>5000//超时时间
    ]); ?>
    <?= GridView::widget([
        'dataProvider' => $dataProvider,
    ])?>
    <?php Pjax::end();?>

    controller:

    public function actionPagePjax()
    {
        $model = Area::find();//查询数据
        $dataProvider = new ActiveDataProvider([
            'query' => $model,
            'pagination' => [
                'pageSize' => 10,//设置每页显示数
            ],
        ]);
        return $this->render('page-pjax', [
            'dataProvider' => $dataProvider
        ]);
    }

    根据如上可以实现分页无刷新现象

0 +1