弹出窗口中的CgridView ajax分页答案

【问题标题】：CgridView ajax pagination in popup window弹出窗口中的CgridView ajax分页
【发布时间】：2013-02-26 18:38:17
【问题描述】：

在我的项目中，我将 cgridview 数据填充到基本窗口中的弹出窗口中。但是当我尝试进行 ajax 分页时，它会失败。我制作了一个名为 list invoices 的视图，仅包含 cgrid 数据。

查看/user/listInvoices.php

<div id="invoice_container" name="invoice_container">
<div align="right"><img src="<?php echo Yii::app()->request->baseUrl; ?>/media/images/add_button.png" name="add_invoice" id="add_invoice"></div>
<?php
echo "INVOICES LISTING";
// <a href="<?php #echo Yii::app()->createAbsoluteUrl('/studio/addInvoices') ">Add Invoice</a>
//echo $schedules;
?>
<?php
$this->widget('zii.widgets.grid.CGridView', array(
    'dataProvider' => $invoice->search($studioId),
    'columns' => array(
        array(
            'name' => 'Invoice Number',
            'type' => 'raw',
            'value' => '$data->invoice_no',
        ),
        array(
        'name' => 'Student',
        'type' => 'raw',
        'value' => '$data->user_id',
        ),
        array(
            'name' => 'Invoice Date',
            'type' => 'raw',
            'value' => '$data->invoice_date',
        ),
        array(
            'name' => 'Invoice Amount',
            'type' => 'raw',
            'value' => '$data->invoice_amount',
        ),
        array(
            'name' => 'Status',
            'type' => 'raw',
            'value' => '$data->invoice_status',
        ),
    ),
));
?>
</div>

在我的控制器中

在 baseview.php 上，我向用户控制器发送请求以加载发票。 ajax 返回成功，并将数据填充到发票控制器网格上。

view/user/baseview.php

$.ajax({
 url:loadinvoice,
 success: function(data) { $('#invoice_controller).html(data);}
});

usercontroller.php

public function actionLoadinvoice() {
 $this->renderPartial('listinvoices');
}

但在我的 div 中，由 ajax 分页填充的网格不起作用。当我单击下一页时，浏览器会重新加载。这背后的问题是什么。我想我需要在 .bind() 或 .live() 中绑定 ajax 分页属性。但是我该怎么做呢。

【问题讨论】：

我在尝试切换页面上的 ajax 列表视图时遇到了同样的问题。例如，如果你这样做 $this->renderPartial('listinvoices', null, false, true) //注意设置最后一个参数“true”意味着处理附加到列表视图的js并正确绑定事件。但是这样做两次会导致 2 次绑定，我不知道如何避免这种情况。

标签： ajax yii popup pagination cgridview

【解决方案1】：

您好，如果您想使用 ajax 更新网格视图，您应该在 javascript 中使用 $.fn.yiiGridView.update(id,options) 函数。 Id 是您的 gridview 的 id，options 只是常规的 ajax 选项。请参阅下面的完整签名

 /**
     * Performs an AJAX-based update of the grid view contents.
     * @param string the ID of the grid view container
     * @param map the AJAX request options (see jQuery.ajax API manual). By default,
     * the URL to be requested is the one that generates the current content of the grid view.
     */
    $.fn.yiiGridView.update = function(id, options) {
            var settings = $.fn.yiiGridView.settings[id];
            $('#'+id).addClass(settings.loadingClass);
            options = $.extend({
                    type: 'GET',
                    url: $.fn.yiiGridView.getUrl(id),
                    success: function(data,status) {
                            $.each(settings.ajaxUpdate, function() {
                                    $('#'+this).html($(data).find('#'+this));
                            });
                            if(settings.afterAjaxUpdate != undefined)
                                    settings.afterAjaxUpdate(id, data);
                            $('#'+id).removeClass(settings.loadingClass);
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                            $('#'+id).removeClass(settings.loadingClass);
                            alert(XMLHttpRequest.responseText);
                    }
            }, options || {});
            if(options.data!=undefined && options.type=='GET') {
                    options.url = $.param.querystring(options.url, options.data);
                    options.data = {};
            }
            options.url = $.param.querystring(options.url, settings.ajaxVar+'='+id)

            if(settings.beforeAjaxUpdate != undefined)
                    settings.beforeAjaxUpdate(id);
            $.ajax(options);
    };

【讨论】：