yii_CGridView_ajax_pagination_and_ajax_sort

本文主要内容：

1， 正常情况下 cgridview 实现 ajax 分页和排序的原理

2， 分页和排序无法Ajax的情况分析

3， 自定义分页（重写CLinkPager）后如何实现 Ajax 分页和排序

/***

author: php攻城师

http://blog.csdn.net/phpgcs

***/

[php]  

$this->widget('zii.widgets.grid.CGridView', array(  

    'id'=>'keyword-grid',  

    'dataProvider'=>$model->search(),  

    'cssFile'=>false,  

    'template'=>'{items}

    'pager'=>array('cssFile'=>false),  

    'ajaxUpdate'=>true,  

    'columns'=>array(  

        array(  

            'name'=>'leader_name',  

            'value'=>'$data->event',  

            'header'=>'关键词名称',  

            'headerHtmlOptions'=>array('width'=>'130px'),  

        ), .... ....  

以上代码实现一个常规的 CGridView ， 除了 pager 用了自定义的样式。。

而在页面的源代码中，我来找出相关的部分：

[javascript]  

[javascript] view plaincopyprint?

/*

jQuery(function($) {  

jQuery('#keyword-grid a.delete').live('click',function() {  

    if(!confirm('确定要删除这条数据吗?')) return false;  

    var th=this;  

    var afterDelete=function(){};  

    $.fn.yiiGridView.update('keyword-grid', {  

        type:'POST',  

        url:$(this).attr('href'),  

        success:function(data) {  

            $.fn.yiiGridView.update('keyword-grid');  

            afterDelete(th,true,data);  

        },  

        error:function(XHR) {  

            return afterDelete(th,false,XHR);  

        }  

    });  

    return false;  

});  

jQuery('#keyword-grid').yiiGridView({'ajaxUpdate':['1','keyword-grid'],'ajaxVar':'ajax','pagerClass':'pager','loadingClass':'grid-view-loading','filterClass':'filters','tableClass':'items','selectableRows':1,'pageVar':'keyword_page'});  

});  

/*]]>*/  

其中会发现 yii 自动加载了 jquery.ba-bbq.js  &&  jquery.yiigridview.js ,以及2段 代码

其中一段是用来实现  删除 一行数据时 弹出提示框 让用户 确认是否删除 功能 的；

一段是最核心关键的 用于 ajax update grid 的， 也正是这部分 代码 实现了 ajax 的翻页 和 排序。

/*********** 我是分割线 *******************************/

如果发现 点击了 分页 或者 排序 后，不是ajax 方式的（也就是你可以 在 地址栏 中 看到 每次 请求的常常的 url ）

一个要检查的地方：

ajaxUpdate=>'', 这个参数

updateSelector=>'', 这个参数

/*********** 我是分割线 *******************************/

一般情况下，CLinkPager都无法满足我们的需求，要重写；

而重写我这里提供3种方式：

1， 禁用 CGridView自己的Pager ，在 CGridView 之外 自己写

2， 禁用 CGridView自己的Pager ，重写 CGridView 文件， 将 自己的pager 写在     public function renderItems() 中

3， 配置 CGridView 的 pager 参数。

如下是默认的 CLinkPager 的样子

翻页: 

现在我们想要如下的Pager 效果

第 31 - 40 条, 共 14546 条  

  上一页 1 2 3 4 5 6 7 8 9 10 下一页  

/***

author: php攻城师

***/

先看第1种重写方案：

重写 CLinkpager 如下：

[php]  

$this->widget('CLinkPager', array(  

    'header'=>'第 '.($paginationTop->getCurrentPage()*$paginationTop->getPageSize()+1).  

    ' - '.($paginationTop->getCurrentPage()*$paginationTop->getPageSize()+$paginationTop->getPageSize()).  

    ' 条, 共 '.$paginationTop->getItemCount().' 条  ',  

    'pages' => $paginationTop,  

    'itemCount'=>$totalItemFoundCount,  

    'prevPageLabel' => '上一页',  

    'cssFile'=>false,  

    'nextPageLabel' => '下一页',  

    'footer'=>'  ',  

));   

其中的 pagination 在 controller 中生成

[php] 

$paginationTop = new CPagination($totalItemFoundCount);  

$paginationTop->pageSize= $pageSize;  

然后把重写的 CLinkPager 放在  CGridView 前面即可。

Appicons AI

AI生成精致的App图标

58

查看详情

运行后发现一个Bug ，就是 分页 不是 Ajax 的。

不是Ajax的不要紧， 关键是 分页和排序不能结合使用了。

原因很简单， 分页不是ajax 的，而排序是ajax 的， 两个 请求发出后 url 不在一个地方， 那么分页参数和 排序参数就 不再一地方， 当然无法结合使用。

解决方案： 统一起来。

要么统一为url排序&分页， 要么统一为ajax排序&分页。

url的简单， 设置 ajaxUpdate=>false,

ajax的也简单， 只要理解了本文第一部份说的 ajax 排序的原理，

之所以不能够 ajax 分页， 是因为我们的分页是 重写了， 而且还放在了CGridView 之外， 这样如何让 

jQuery('#keyword-grid').yiiGridView({'ajaxUpdate':['1','keyword-grid'],'ajaxVar':'ajax','pagerClass':'pager','loadingClass':'grid-view-loading','filterClass':'filters','tableClass':'items','selectableRows':1,'pageVar':'keyword_page'});

ajaxUpdate的时候 还去照顾到你写在外面的 CLinkPager 呢？

配置2个参数：

                    'ajaxUpdate'=>'datalist-grid, yw0',

                    'updateSelector'=>'.pager a, thead th a',

本来 ajaxUpdate 的作用范围 只是  datalist-gird ， 现在我们告诉他 还要 作用在我们重写在grid 外面的 分页 ul  ，其id 是 yw0.

updateSelector 指定了 触发 ajaxUpdate 这个动作的html元素， 也是要保证 包含了 分页的链接和排序的链接 ， 否则也是无法成功 ajax 排序/分页。

再看第2种重写方案：

上面第一种方案 太复杂了把， 既然问题的核心关键是 没有把自定义的 ClinkPager 放在 CGridView 中， 那我们就重写 CGridView将其放进去呗。

对，确实是可行的。

[php]  

Yii::import('zii.widgets.grid.CGridView');  

class EbuCGridView extends CGridView  

{  

    /**      

     * Renders the data items for the grid view. 

     */       

    public function renderItems()  

    {     

        if($this->dataProvider->getItemCount()>0 $this->showTableOnEmpty)  

        {     

            $this->renderCustomerPager();  

            echo "

            $this->renderTableHeader();  

            ob_start();  

            $this->renderTableBody();  

            $body=ob_get_clean();  

            $this->renderTableFooter();  

            echo $body; // TFOOT must appear before TBODY according to the standard.  

            echo "

            $this->renderCustomerPager();  

        }         

        else          

            $this->renderEmptyText();  

    }                     

    public $paginationTop;  

    public $totalItemCount;  

    public $totalItemFoundCount;  

    public function renderCustomerPager()  

    {                     

        $paginationTop = $this->paginationTop;  

        $totalItemCount = $this->totalItemCount;  

        $totalItemFoundCount = $this->totalItemFoundCount;  

        echo '