2

我有一个以特定间隔刷新的 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'


    ),

));
?>

这是主要的 index.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 中负责 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 分钟后再次在过滤器框中输入搜索关键字。

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

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

提前致谢，

麦克斯

4

1 回答 1

2

马克斯。我查看了为网格寻呼机生成的 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() ;   
             }',

所以你可以试试。类似于：

 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

于 2014-07-21T17:35:47.710 回答