php - 面临 $.fn.yiigridview.update 、过滤器、排序、分页重置为空的问题

Question

我有一个 CGridview，它以特定的时间间隔刷新。排序、过滤和分页都是由ajax 完成的，并且运行良好。问题是 $.fn.yiiGridView.update 以特定的时间间隔更新网格，因此过滤器、排序、分页属性被重置为空，并且网格在每次刷新时显示第一页。

这是有问题的 View ，_productDataGrid.php

    <?php

$this->widget('bootstrap.widgets.TbGridView', array(
    'id' => 'realtime-gridAMZ',
    'itemsCssClass' => 'table table-dark table-striped ',
    'htmlOptions' => array(
        'class' => 'product-datagrid',
    ),
    'dataProvider' => $model->search(),
    'filter' => $model,
    'ajaxUpdate' => 'realtime-gridAMZ',
    'ajaxUrl' => Yii::app()->createUrl('realTime/AjaxUpdate'),

    'pager' => array(
        'header' => '',
        'cssFile' => false,
        'maxButtonCount' => 10,
        'selectedPageCssClass' => 'active',
        'hiddenPageCssClass' => 'disabled',
        'firstPageCssClass' => 'previous',
        'lastPageCssClass' => 'next',
        'firstPageLabel' => '<<',
        'lastPageLabel' => '>>',
        'prevPageLabel' => '<',
        'nextPageLabel' => '>',
    ),
    'summaryCssClass' => 'label label-warning',
    'columns' => array(
        'id',
        'name',
        'category',
        'price'
        'rating'


    ),

));
?>

这是主 index.php View ，它在页面加载时最初显示网格。

   <div class="box span12" onTablet="span6" onDesktop="span12">
        <div class="box-header">
            <h2><i class="icon-list"></i><span class="break"></span>AMZ</h2>
            <div class="box-icon">
                <a href="#" class="btn-minimize"><i class="icon-chevron-up"></i></a>
                <a href="#" class="btn-close"><i class="icon-remove"></i></a>
            </div>
        </div>
        <div class="box-content">
            <?php
            $this->renderPartial('//realTime/_productDataGrid', array(
                'model' => new RealTime(),
            ));
            ?>
        </div>        
    </div><!--/span-->
</div>


<?php
 $baseUrl = Yii::app()->baseUrl;
        $cs = Yii::app()->getClientScript();
        $cs->registerScriptFile($baseUrl . '/js/ajaxProductDataUpdate.js');
?>

这是设置计时器并调用网格更新函数的 jquery 文件。 ajaxProductDataUpdate.js

    function updateAMZGrid() {
    $.fn.yiiGridView.update('realtime-gridAMZ', {
        data: $(this).serialize()
    });
    return false;
}

$(document).ready(function() {
    setInterval(updateAMZGrid, 60000);

});

最后是 RealTimeController 中负责 ajax 渲染的 actionAjaxUpdate

public function actionAjaxUpdate() {
    $dataProvider = new RealTime();
    $dataProvider->unsetAttributes();

    if (isset($_GET['RealTime']))
        $dataProvider->attributes = $_GET['RealTime'];
    $this->renderPartial('_producDataGrid', array(
        'model' => $dataProvider,
    ));

}

现在，就像我上面提到的，所有功能都按预期工作。但是过滤器、排序、分页属性在每次调用 yiiGridViewUpdate 时都会被重置。例如，如果用户当前正在查看表格的第 24 页，则 1 分钟后网格将更新，并且他将被重定向到表格的首页或第 1 页。

与过滤器相同，假设用户输入搜索关键字，并且他正在查看结果，1分钟后他将再次看到表格的首页或第1页，并且过滤结果将消失。因此，1 分钟后，他必须再次在过滤框中输入搜索关键字。

现在，这对于任何通过网格浏览数据的人来说都是一个很大的障碍。

有谁知道这个问题的解决办法吗？请让我知道我应该做什么才能使其正常工作。我试图通过反复试验来修复它，但一无所获。

提前致谢，

麦克斯

Answer 1

麦克斯。我查看了为网格寻呼机生成的 JS 代码(当网格被 ajax 更新时):

jQuery('#assortment-grid').yiiGridView({'ajaxUpdate':['assortment-grid'],'ajaxVar':'ajax','pagerClass':'pager','loadingClass':'grid-view-loading','filterClass':'filters','tableClass':'items','selectableRows':1,'enableHistory':false,'updateSelector':'{page}, {sort}','filterSelector':'{filter}','pageVar':'Assortment_page'});

这个 js 可以发送 ajax 请求进行网格分页，如下所示:

http://srv50213.ht-test.ru/app2/index.php?Assortment[itemSearch]=31351134582, BMW 5 SERIES '85-95 ?28/32/34 FORD MONDEO&Assortment_page=5&ajax=assortment-grid&r=assortment/searchtool

在这个 uri 中有一些神奇的参数:

• Assortment_page=5 分别。用于分页

• Assortment[itemSearch]=31351134582... 和 Assortment[subgroup]='ДЕТАЛИ КУЗОВА' - 它们负责维护服务器端的过滤:

  if (isset($_GET['realtime-gridAMZ']))
$dataProvider->attributes = $_GET['realtime-gridAMZ'];

• ajax=assortment-grid 分别。用于指示ajax调用。

考虑到这些先决条件，您可能会尝试修改代码以在获取序列化数据时更新计时器上的网格。这里修改一些:

 function updateAMZGrid() {
$.fn.yiiGridView.update('realtime-gridAMZ', {
    data: $(this).serialize()
});
return false;
}

您可能想检查通过 $(this).serialize() 传递了哪些数据或添加一些内容。就像$('#realtime-gridAMZ').serialize()。您如何检查 $_GET['realtime-gridAMZ_page'] 并将其“复制/粘贴”到 ajax 请求中:

+ '&realtime-gridAMZ_page=' . $_GET['realtime-gridAMZ_page']

因此，您可以为重复请求获取当前数据。就我而言，它可以在没有ajax的情况下与juiAutoComplete一起很好地工作:

...
'select'=>'js:function(event, ui) {                            
                $(this).val(ui.item.value); 
                location.href= "'. $this->createUrl($this->route) . '&Assortment[itemSearch]=" + ui.item.value + $("#uni-form").serialize() ;   
             }',    

因此你可以尝试一下。类似于:

 function updateAMZGrid() {
$.fn.yiiGridView.update('realtime-gridAMZ', {
    data: $(this).serialize() + $('#realtime-gridAMZ').serialize() + + '&realtime-gridAMZ_page=" . $_GET['realtime-gridAMZ_page'] . " 
});
...
return false;

还要检查服务器端是否正确获取 XHR 请求中的 GET 参数:

`if (isset($_GET['realtime-gridAMZ']))
    $dataProvider->attributes = $_GET['realtime-gridAMZ'];`

为什么你有$dataProvider->attributes = $_GET['realtime-gridAMZ'];，我通常将GET/POST参数获取到模型中，而不是DataProvider中:

 `$model->attributes = $_GET['realtime-gridAMZ'];`

只有在那之后

`$dataProvider = $model->search();`

希望对您有帮助，如有不清楚的地方，请随时提问。不要忘记调试工具:F12 或 Ctrl+Shift+I