Yii2 pjax.reload 不适用于 gridview 记录更新

Question

我为网格视图开发了每页行功能。使用具有 5,10,25,50,100 等选项的下拉菜单。在更改任何下拉选项时，我需要为网格视图显示选定的行数。为此，我创建了一个 Pjax 容器，其网格视图如下：

<?php

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

$this->title = 'Test Cards';
$this->params['breadcrumbs'][] = $this->title;
?>

<div class="row">
    <div class="test-card-index">
        <?= $this->render('_search', [ 'model' => $searchModel ]) ?>   
    </div>
</div>

<?php Pjax::begin(['id' => 'test_grid_pjax', 'enablePushState' => false, 'timeout' => 1000000]); ?> 

<div class="row">
<?= GridView::widget([
    'dataProvider' => $dataProvider,
    'class' => 'table table-bordered responsive',
    'id' => 'test_grid',
    'summary' => "<div class='summary'><label>Showing {begin} - {end} of {totalCount} items.</label></div> <div class='col-sm-6 pageDropdown'> <label>Records per page</label>  ".Html::dropDownList('pageSize', (int) Yii::$app->session->get('pageSize', Yii::$app->params['defaultPageSize']), Yii::$app->params['rowPerPage'], ['id' => 'pageSize', 'class' => 'form-control', 'onchange' => 'return reloadGrid("test_grid_pjax",this.value)']) . "</div>",
    'layout' => '{summary}{items}<div class="pager">{pager}</div>',
    'options' => ['class' => 'main-grid grid-view full-table'],
    'columns' => [
        'cc_amount',
        'cc_number',                    
        'cc_type',
        'cc_status'
        ],
    ]);
?>
</div>

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

_search.php 看起来像：

<?php
use yii\helpers\Html;
use yii\widgets\ActiveForm;
?>

<div class="test-card-search">

    <?php $form = ActiveForm::begin([
    'action' => ['index'],
    'method' => 'get',
    'options' => ['data-pjax' => true , 'class'=>'search_form form-horizontal' ]

]); ?>

<div class="form-group">
    <div class="row">
        <div class="col-md-6">
            <?= Html::activeLabel($model, 'cc_number',['class'=>'control-label col-sm-5']); ?>
            <div class="col-sm-6">
                <?= Html::activeTextInput($model, 'cc_number', ['class'=>'form-control col-sm-5','autofocus'=>true]); ?>                                
            </div>
        </div>
    </div>
</div>

<div class="form-group"> 
    <div class="row">
        <div class="col-md-6">
            <?= Html::activeLabel($model, 'cc_type',['class'=>'control-label col-sm-5']); ?>
            <div class="col-sm-6">                                
                <?= Html::activeDropDownList($model, 'cc_type',[ "RESTRICTED" => Yii::t('app','RESTRICTED'), "UNRESTRICTED" => Yii::t('app','UNRESTRICTED')],['prompt' => Yii::t('app','All Types'), 'class'=>'form-control col-sm-5']); ?>                                
            </div>
        </div>
    </div>
</div>

<div class="form-group">
    <div class="col-md-5"></div>

    <div class="col-md-3">
        <div class="form-group">
            <?= Html::submitButton('Search', ['class' => 'btn btn-blue']) ?>
            &nbsp;&nbsp;&nbsp;
            <?= Html::resetButton('Reset', ['class' => 'btn btn-primary','id'=>'resetButton','onclick'=>"location.href = '".Yii::$app->urlManager->createUrl('testcard/index')."';"]) ?>
        </div>
    </div>
</div>  

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

</div>

Controller 中的操作如下所示：

public function actionIndex()
{

    if (Yii::$app->request->get('pageSize')) {
        Yii::$app->session->set('pageSize', (int) Yii::$app->request->get('pageSize'));
    }

    // to set the selected page number of the grid
    if (Yii::$app->request->get('page')) {
        Yii::$app->session->set('page',(int)Yii::$app->request->get('page'));
    } else {
        Yii::$app->session->set('page',1);
    }

    $searchModel = new TestCardSearch();
    $dataProvider = $searchModel->search(Yii::$app->request->queryParams);

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

函数 reloadGrid() 是这样的：

<script type='text/javascript'>
function reloadGrid(id, value, url) {
$.pjax.reload({
    container: "#" + id,
    data: $('#search_form').serialize() + "&pageSize=" + value,
    url: url,
    push: false,
    replace: false,
    timeout: 1000000
});
}
</script>

在搜索任何字段时，它会重新加载整个页面并在 url 中设置搜索参数。 另一个问题是，在更改“pageSize”下拉列表时，它仅在第一次时工作正常，在其他所有尝试中，它都会在控制台中显示错误，例如：

Uncaught TypeError: Cannot read property 'reload' of undefined
at reloadGrid (index:53)
at HTMLSelectElement.onchange (index:1)

是JS冲突的问题吗？ 我通过谷歌搜索尝试了许多解决方案，但都没有成功。

Answer 1

我遇到了一个类似的问题，即 pjax 没有解析网格过滤器中的所有搜索字段。我的解决方案/解决方法/hack 是触发网格过滤器字段的更改事件，而不是直接调用 pjax reload。

        $('.date-range-filter').trigger('change'); // this works

        /*  // this didn't parse all the values from my form 
        $.pjax.reload({
            container: "#grid-pjax"
        });
        */

它与 gridView 收集表单值以进行提交的方式有关。它实际上为网格列过滤器构建了一个新的虚拟表单，因为gridview的标题过滤器没有实际的表单

在您的情况下，您还应该检查源并确保表单的 ID 正确

    <?php $form = ActiveForm::begin([
    'action' => ['index'],
    'method' => 'get',
    'id'=> 'myFormId' // <---- try giving the form an id
    'options' => ['data-pjax' => true , 'class'=>'search_form form-horizontal' ]

]); ?>

您也可以尝试使用 pjax 小部件表单选择器属性- 而不是 pjax 开始和结束。这将使 pjax 自动获取该表单中的所有输入字段。

<?php
Pjax::widget([
    'id' => 'search-form', 
    'enablePushState' => false, 
    'enableReplaceState' => false, 
    'formSelector' => '#myFormId', // <-- the form to submit with pjax
    // 'submitEvent' => 'change', /// whatever you want 
    ]);
 ?>