Yii2：搜索表单在 Pjax 中无法与 Gridview 一起使用

Question

这里有一些问题，但问题在于网格视图中的过滤器。

我的问题是我无法将外部表单与 gridview 本身集成，因为我不想使用作为 gridview 一部分的搜索表单。

控制器

public function actionIndex()
{
    $searchModel = new BlogSearch();
    $dataProvider = $searchModel->search(Yii::$app->request->queryParams);

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

观看次数 index.php

<?= Html::button('Filter', ['data-toggle' => 'modal', 'data-target' => '#filter-modal', 'class' => 'btn btn-primary']) ?>

<?php
    Modal::begin([
        'header' => '<h3>Search Blog</h3>',
        'id' => 'filter-modal'
    ]);
    echo $this->render('_search', ['model' => $searchModel]);
    Modal::end();
?>

<?php Pjax::begin(); ?>
<?= GridView::widget([
    'dataProvider' => $dataProvider,
    'columns' => [
        'title',
        'content'
    ]
]); ?>
<?php Pjax::end(); ?>

_search.php

<?php $form = ActiveForm::begin([
    'action' => ['index'],
    'method' => 'get',
]); ?>

<?= $form->field($model, 'title') ?>

<?= $form->field($model, 'content') ?>

<div class="form-group">
    <?= Html::submitButton('Search', ['class' => 'btn btn-primary']) ?>
</div>

<?php ActiveForm::end(); ?>

在“index.php”中，gridview 在 pjax 内，但搜索表单在外面，但即使表单在“Pjax :: begin”内，它也不起作用。

也就是说，当我进行搜索时，页面会重新加载。我只想更新gridview。

Answer 1

据我从讨论中了解到，您不想使用GridView 内的过滤器字段，而是想使用搜索表单来过滤GridView。如果这是正确的，你需要为此做两件事

1. 将您的表单移动到 pjax 块内

index.php

<?= Html::button('Filter', ['data-toggle' => 'modal', 'data-target' => '#filter-modal', 'class' => 'btn btn-primary']) ?>
<?php Pjax::begin(['enablePushState'=>false]); ?>
<?php
    Modal::begin([
        'header' => '<h3>Search Blog</h3>',
        'id' => 'filter-modal'
    ]);
    echo $this->render('_search', ['model' => $searchModel]);
    Modal::end();
?>


<?= GridView::widget([
    'dataProvider' => $dataProvider,
    'columns' => [
        'title',
        'content'
    ]
]); ?>
<?php Pjax::end(); ?>

2.第二个最重要的事情是在表单选项中包含data-pjax的选项。

_search.php

<?php $form = ActiveForm::begin([
    'action' => ['index'],
    'id'=>'my-form',
    'method' => 'get',
    'options' => [
        'data-pjax' => 1
    ],
]); ?>

<?= $form->field($model, 'title') ?>

<?= $form->field($model, 'content') ?>

<div class="form-group">
    <?= Html::submitButton('Search', ['class' => 'btn btn-primary']) ?>
</div>

<?php ActiveForm::end(); ?>

编辑

您可能会发现模态叠加层停留在那里并且模态窗口本身隐藏的问题，为您的表单提供id 就像id=>"my-form" 并在您的_search.php 文件中添加以下内容以绑定beforeSubmit 事件ActiveFormJS

$this->registerJs('$("#my-form").on("beforeSubmit", function (e) {
$("#filter-modal").modal("hide");
});', \yii\web\View::POS_READY);