Ajax 在 Yii 中使用 GridView 进行过滤

Question

我想在 Yii Grid View 中使用 PJax，而不是使用 Grid View 内部的关联过滤器，而是使用它外部的 Search Filter，因此它可以在内部过滤结果。

这里是索引文件的来源：

<div class="cars-index">

<h1><?= Html::encode($this->title) ?></h1>


<?php  echo $this->render('_search', ['model' => $searchModel]); ?>

<p>
    <?= Html::a('Create Cars', ['create'], ['class' => 'btn btn-success']) ?>
</p>


<?= GridView::widget([
    'dataProvider' => $dataProvider,
    'columns' => [
        'id',
        'name',
        ['attribute' => 'code',
        'label' => 'Colour',
        'format' => 'raw',
        'value' => 'colour',
        'contentOptions' => function ($model, $key, $index, $column){
            return ['style' => ' text-align: center; width: 100px;color:white;background-color:#'. $model -> code];
        },
        'headerOptions' => ['style' => 'text-align: center;'],
        ],
        'price',
        ['class' => 'yii\grid\ActionColumn'],
    ],
]); ?>

我是否应该只为要过滤的部分创建一个活动表单？或者有别的办法吗？

Answer 1

如果您不能像这样简单地为您添加过滤器 table

<?= GridView::widget([
    'dataProvider' => $dataProvider,
    'filterModel' => $searchModel,

我建议你使用一个适当的动作和一个适当的搜索函数，由提交基于指定的活动表单调用

对于动作形式 例如：

<?php $form = ActiveForm::begin([
   'id' => 'search-form',
   'method' => 'post',
   'action' => ['controller/yourAction']
]); ?>

在控制器中

 $model = new yourActiveForm();

    if ($model->load(Yii::$app->request->post()) ) {

      $dataProvider = $searchModel->search( [ 'yuorSearchModel'=> ['your_att1' => $model->yourValue1]]);
   }

然后你的渲染

符合yii2 doc

Pjax only deals with the content enclosed between its begin() and end() calls, called the body content of the widget. By default, any link click or form submission (for those forms with data-pjax attribute) within the body content will trigger an AJAX request. In responding to the AJAX request, Pjax will send the updated body content (based on the AJAX request) to the client which will replace the old content with the new one. The browser's URL will then be updated using pushState. The whole process requires no reloading of the layout or resources (js, css).

You may configure $linkSelector to specify which links should trigger pjax, and configure $formSelector to specify which form submission may trigger pjax.

您必须添加

<?php Pjax::begin(); ?> 
 .... your active form

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

并配置正确的 $linkSelect 和 $formSelector

Answer 2

在您的过滤器视图中：

<div id="myFilter">
    <?php $form = ActiveForm::begin([
        'id' => 'myFilterForm',
        'method' => 'post',
        'action' => [...],
    ]); ?>
    ...
</div>

并确保在 Pjax::begin 和 Pjax::end

之间渲染滤镜

然而，诀窍来了。如果您的服务器在默认超时内没有响应，Pjax 将被忽略并重新加载页面，因此请确保 timeout 足够大：

<?php Pjax::begin([
    'id'=>'myGrid',
    'timeout' => 10000,                    // <------------ THIS !!!!!!!
    'formSelector' => '#myFilterForm'
]); ?>

<?= $this->render('myFilter', ['model' => $searchModel]); ?>

<?= GridView::widget([
    ...
]); ?>
<?php Pjax::end(); ?>

同样在您的控制器中，您可能想要 "reset" 搜索模型，因此只有请求中使用的数据才是 search 实际使用的属性：

public function actionSearch()
{
    $searchModel = new MySearch();

    if ($searchModel->load(Yii::$app->request->post())) {
        $searchModel = new MySearch(); // "reset"
        $dataProvider = $searchModel->search(Yii::$app->request->post());
    } else {
        $dataProvider = $searchModel->search(Yii::$app->request->queryParams);
    }

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

希望这对您有所帮助。干杯！

Ajax 在 Yii 中使用 GridView 进行过滤

Ajax Filtering with GridView in Yii

ajax

gridview

filter

pjax

yii2