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


Facing Trouble With $.fn.yiigridview.update , Filters, Sort, Paging Getting Reset To Null

我有一个以特定间隔刷新的CGridview。排序,过滤和分页都是由ajax完成的,并且工作得很好。问题是 $.fn.yiiGridView.update 以特定的时间间隔更新网格,因此筛选器、排序、分页属性将重置为 null,并且网格在每次刷新时都显示第一页。

这是有问题的观点,_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'

    ),
));
?>

这是主索引.php视图,它最初在页面加载时显示网格。

   <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中的actionAjaxUpdate,负责ajax渲染。

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 分钟后再次在过滤器框中输入搜索关键字。

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

有谁知道解决这个问题的方法?请让我知道我应该怎么做才能使其正常工作。我正在尝试通过反复试验来修复它,但我一无所获。

提前感谢,

麦克斯

Maxx.我看了一下为网格分页器生成的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()传递或添加 smth $('#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() ;   
             }',    

因此,您可以尝试 smth。 类似于:

 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 参数放入模型中,而不是进入数据提供者:

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

只有在那之后

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

希望这对您有所帮助,如果不清楚,请随时提出任何问题。不要忘记跟踪工具:F12 或 Ctrl+Shift+I