Question

问题：我想以pjax样式更新GridView，但它会重定向到表单创建页面。

以下代码的作用：

使用GridView的索引页面显示数据列表并在模态窗口中打开表单以创建新记录。表单代码将动态添加到模式中。
当点击索引页面上的“创建国家/地区”按钮时，它会调用country / create来获取表单的HTML代码并将其插入到模态中，然后显示模态窗口。
单击表单上的“创建”按钮时，会将表单提交到country / create。这将返回索引页面的HTML代码，我希望它更新GridView部分，但它没有。

代码：

Controller CountryController.php

class CountryController extends Controller
{

    public function actionIndex()
    {
        return $this->renderIndex();
    }

    public function actionCreate()
    {
        $model = new Country();

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

    private function renderIndex()
    {
        $searchModel = new CountrySearch();
        $dataProvider = $searchModel->search(Yii::$app->request->queryParams);

        return $this->render('index', [
            'searchModel' => $searchModel,
            'dataProvider' => $dataProvider,
        ]);
    }
}

查看index.php

<?php

use yii\helpers\Html;
use yii\grid\GridView;
use yii\widgets\Pjax;
use yii\web\View;

$this->title = Yii::t('app', 'Countries');
$this->params['breadcrumbs'][] = $this->title;

yii\bootstrap\Modal::begin(['id' => 'modal']);
yii\bootstrap\Modal::end();
?>
<div class="country-index">

    <h1><?= Html::encode($this->title) ?></h1>
    <div>Current Time: <?= date('Y/m/d H:i:s') ?></div>

    <p><?= Html::a(Yii::t('app', 'Create Country'),
        ['create'],
        ['class' => 'btn btn-success show-modal']) ?>
    </p>
    <?php Pjax::begin(['id' => 'pjax-grid']); ?>
        <?= GridView::widget([
            'dataProvider' => $dataProvider,
            'filterModel' => $searchModel,
            'columns' => [
                ['class' => 'yii\grid\SerialColumn'],
                'id',
                'name',
                ['class' => 'yii\grid\ActionColumn'],
            ],
        ]); ?>
    <?php Pjax::end(); ?>
</div>
<?php
$this->registerJs("$(function() {
   $('.show-modal').click(function(e) {
     e.preventDefault();
     $('#modal').modal('show').find('.modal-body')
     .load($(this).attr('href'));
   });
});", View::POS_READY, '.show-modal');
?>

查看_form.php

<?php

use yii\helpers\Html;
use yii\widgets\ActiveForm;
use yii\web\View;
?>
<?php
$this->registerJs(
   '$("document").ready(function(){ 
        $("#pjax-create").on("pjax:end", function() {
            $.pjax.reload({container:"#pjax-grid"});  //Reload GridView
        });
    });'
, View::POS_READY, 'pjax-create-end');
?>

<div class="country-form">
    <?php yii\widgets\Pjax::begin(['id' => 'pjax-create']) ?>
        <?php $form = ActiveForm::begin(['options' => ['data-pjax' => TRUE]]); ?>

        <?= $form->field($model, 'name')->textInput(['maxlength' => true]) ?>

        <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>

Answer 1

使用Html :: button代替Html :: a并简单地覆盖模态的内容：

yii\bootstrap\Modal::begin(['id' => 'modal']);
echo '<div id="modal-content"></div>';
yii\bootstrap\Modal::end();

echo Html::button('Create Country', [
    'onClick' => 'createCountry("' . Url::to([create]) . '")',
    'class' => 'btn btn-primary'
]);

$script = <<< JS
function createCountry(url) {
    $('#modal').modal('show').find('#modal-content').load(url);
}
JS

$this->registerJs($script, View::POS_END);

yii2动态加载pjax表单

1 个答案: