Yii 使用 CListView 列表控件显示数据及具体参数设置

Yii  PHP  Bootstrap  

CListView是我们在使用Yii时经常用到的控件,它的设置可繁可简,简单的5行代码就可以写完;复杂的也许就要写上几十行代码。记性不佳,本着好记忆不如烂笔头的精神,记录一下使用方法。


1、控制器中获取数据


public function actionIndex()
{
    $criteria = new CDbCriteria();
    /*  
    ...
    查询条件
    Condition
    */
    $count = SomeModel::model()->count($criteria);
    $pager = new CPagination($count);
    $pager->pageSize=20;
    $pager->applyLimit($criteria);
    $dataProvider = SomeModel::model()->findAll($criteria);
    $this->render(
        'index',
        array(
            'dataProvider'=>$dataProvider,
            "pager"=>$pager
        ),
    );
}


2、视图中显示内容


稍作修改还能按照 Bootstrap 格式显示内容


$this->widget('zii.widgets.CListView', array(
    //$dataProvider 列表内容的数据源
    'dataProvider'=>$dataProvider,
    // 当 dataProvider 为空时显示的内容。
    'emptyText' => '没有符合条件的记录!',
    // 部件的HTML属性。
    'htmlOptions' = > array(
            'class'=>'data_class',
        ),
    //列表项目的格式,对应 _view.php 文件
    'itemView'=>'_view',
    //使用AJAX加载数据时进度条容器的CSS类 默认为‘loading’。
    'loadingCssClass' => 'loading',
    //template是整个CListView的模板:
    //{summary}的位置会显示基本描述,可修改summaryText项来设置描述的模板
    //{sorter}的位置会显示更改排序方式的按钮,需要定义sortableAttributes项来描述哪一属性是可排序的
    //{items}的位置会显示列表,列表中每一项的格式来自itemView项定义的文件
    //{pager}的位置会显示分页器,可通过定义pager项来设定分页器的显示方式
    'template'=>'
        <div class="summary">{summary}</div>
        <div class="sorter">{sorter}</div>
        <table class="table table-striped table-hover">{items}</table>
        <div class="pager">{pager}</div>',
    //定义summary的div容器的class
    'summaryCssClass'=>'summary_container',
    //定义summary内容的格式
    //其中可用到以下变量:
    //{start}表示本页的第一条是全部中的第几条
    //{end}表示本页最后一条是全部中的第几条
    //{count}表示全部共几条
    //{page}表示当前页码
    //{pages}表示总页数
    'summaryText'=>'共{count}条,当前页显示第{start}-{end}条',
    //定义可排序的属性
    'sortableAttributes'=>array('title','create_time'),
    //定义sorter的div容器的class
    'sorterCssClass'=>'sorter_container',
    //定义的文字显示在sorter可排序属性的前面
    'sorterHeader'=>'更改排序:',
    //定义的文字显示在sorter可排序属性的后面
    'sorterFooter'=>'',
    //定义pager的div容器的class
    'pagerCssClass'=>'pager_container',
    // 视图容器的标签。默认为‘div’。
    // 如果使用表格(<tr><td></td></tr>)显示每项数据,可以用 tbody 代替div作为数据列表的容器
    'tagName' => 'tbody',
    // 显示页码的容器的CSS类。默认为‘pager’。
    'pagerCssClass' => 'pager',
    //显示各条数据的容器的CSS类。默认为‘items’。
    'itemsCssClass' => 'items',
    'pager'=>array(
        //关于分页器这个array,具体还有很多属性,可参考CLinkPager的API
        //定义要调用的分页器类,默认是CLinkPager,需要完全自定义,还可以重写一个
        'class'=>'CLinkPager',
        //定义分页器的要调用的css文件,false为不调用,不调用则需要亲自己css文件里写这些样式
        'cssFile'=>false,
         //定义的文字将显示在pager的最前面
        'header'=>'转往分页:',
        //定义的文字将显示在pager的最后面
        'footer'->'',
        //定义首页按钮的显示文字
        'firstPageLabel'=>'首页',
        //定义末页按钮的显示文字
        'lastPageLabel'=>'尾页',
        //定义下一页按钮的显示文字
        'nextPageLabel'=>'下一页',
        //定义上一页按钮的显示文字
        'prevPageLabel'=>'前一页',
        // 要显示的最多分页按钮数。默认10。
        'maxButtonCount'=>8,
        //返回此pager所用的分页信息。
        // CPagination 类型
        'pages' => $pager,
        // 分页标签的HTML属性。
        // Bootstrap 可选择为 pagination
        'htmlOptions' = > array(
                'class'=>'pagination',
            ),
        //当前分页容器的 class
        // Bootstrap 可选择为 active
        'selectedPageCssClass'=>"active"
    ),
));


自定义Page类


参考另一篇博文:http://blog.sina.com.cn/s/blog_71d4414d0100yu6k.html


1、自定义的分页器类放在哪里?


有两个位置可以放,

  1. 放在 protected/extensions 中,在使用是import进来,或在config文件中import进来;

  2. 放在 protected/components 中,作为组件存在,不需要import

 

2、用派生方式是最好的


class MyPager extends CLinkPager

入口函数是:public function run() ,当显示分页器时run()被调用,里面的输出就会显示在相应位置;

其他的完全自定义,如果你不知道上一页、下一页、首页、尾页、总页数、当前页码等信息,可以参考CLinkPager的源码,yii/frameworks/web/widgets/pagers/CLinkPager.php

 

3、调用方式

在View里的相应widget,定义pager的class为自定义的分页器类名即可,参考:


$this->widget(
    'zii.widgets.CListView', 
    array(
        'dataProvider'=>$dataProvider,
        'itemView'=>'_view',
        'pager'=>array(
        'class'=>'MyPager',
    )
));


时间:2017年04月21日    作者:孟德    分类:后端   浏览:2513    评论:0

链接地址:https://www.abclogs.com/backend_yii_clistview_clinkpage_how_justify_bootstrap.html

评论列表

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。