CListView


yii CListView是非常灵活的显示控件,以下较全面的定义了所有可配置项:

更多功能请见zii.widgets.CListView参考手册

$this->widget('zii.widgets.CListView', array(
    'dataProvider'=>$dataProvider,
    'itemView'=>'_view',
    'template'=>'<div class="summary">{summary}</div><div class="sorter">{sorter}</div><div class="list">{items}</div><div class="pager">{pager}</div>',
    //template是整个CListView的模板:
    //{summary}的位置会显示基本描述,可修改summaryText项来设置描述的模板
    //{sorter}的位置会显示更改排序方式的按钮,需要定义sortableAttributes项来描述哪一属性是可排序的
    //{items}的位置会显示列表,列表中每一项的格式来自itemView项定义的文件
    //{pager}的位置会显示分页器,可通过定义pager项来设定分页器的显示方式
 
    'summaryCssClass'=>'summary_container',//定义summary的div容器的class
    'summaryText'=>'共{count}条,当前页显示第{start}-{end}条',
    //定义summary的显示内容,其中可用到以下变量:
    //{start}表示本页的第一条是全部中的第几条
    //{end}表示本页最后一条是全部中的第几条
    //{count}表示全部共几条
    //{page}表示当前页码
    //{pages}表示总页数
 
    'sortableAttributes'=>array('title','create_time'),//定义可排序的属性
    'sorterCssClass'=>'sorter_container',//定义sorter的div容器的class
    'sorterHeader'=>'更改排序:',//定义的文字显示在sorter可排序属性的前面
    'sorterFooter'=>'',//定义的文字显示在sorter可排序属性的后面
 
    'pagerCssClass'=>'pager_container',//定义pager的div容器的class
    'pager'=>array(
        'class'=>'CLinkPager',//定义要调用的分页器类,默认是CLinkPager,需要完全自定义,还可以重写一个,参考我的另一篇博文:http://blog.sina.com.cn/s/blog_71d4414d0100yu6k.html
        'cssFile'=>false,//定义分页器的要调用的css文件,false为不调用,不调用则需要亲自己css文件里写这些样式
        'header'=>'转往分页:',//定义的文字将显示在pager的最前面
        'footer'->'',//定义的文字将显示在pager的最后面
        'firstPageLabel'=>'首页',//定义首页按钮的显示文字
        'lastPageLabel'=>'尾页',//定义末页按钮的显示文字
        'nextPageLabel'=>'下一页',//定义下一页按钮的显示文字
        'prevPageLabel'=>'前一页',//定义上一页按钮的显示文字
        //关于分页器这个array,具体还有很多属性,可参考CLinkPager的API
    ),
));

下面是示例:

2015-11-15_164146.gif

<?php
	$this->widget ( 'zii.widgets.CListView', array (
			'dataProvider' => $dataProvider,
			'itemView' => '_index/_index_view',
			'template' => "{items}\n{pager}",
			'itemsCssClass' => 'table table-striped table-bordered table-hover text-center th_center',
			'pagerCssClass' => 'widget-foot',
			'pager' => array (
					'class' => 'CLinkPager',
					'nextPageLabel' => '下一页',
					'prevPageLabel' => '上一页',
					'firstPageLabel' => '首页',
					'lastPageLabel' => '末页',
					'htmlOptions' => array (
							'class' => 'pagination'
					),
					'header' => '',
					'hiddenPageCssClass' => 'disabled',
					'selectedPageCssClass' => 'active'
			)
	) );
	?>

由于CListView默认div标签显示的,如果想使用table标签显示,请重写CListView类,下面是示例代码:

1,新建MyCListView文件/protected/components/MyCListView.php

<?php
Yii::import ( 'zii.widgets.CListView' );
class MyCListView extends CListView {
	public $preItemsTag = '';
	public $postItemsTag = '';
	public $itemsThead=array();
	public function renderItems() {
		$starHtml=CHtml::openTag ( $this->itemsTagName, array (
				'class' => $this->itemsCssClass 
		) ) . "\n";
		
		$data = $this->dataProvider->getData ();
		$data_count=($n = count ( $data ));
		if ($data_count > 0) {
			$itemsThead=$this->itemsThead;
			$theadHtml='<thead><tr>';
			foreach ($itemsThead as $i_key=>$i_value){
				$theadHtml.='<th width='.$i_value.'>'.$i_key.'</th>';
			}
			$theadHtml.='</tr></thead>';
			$starHtml.=$theadHtml;
		}
		echo $starHtml;
		
		if ($data_count > 0) {
			$owner = $this->getOwner ();
			$viewFile = $owner->getViewFile ( $this->itemView );
			$j = 0;
			foreach ( $data as $i => $item ) {
				$data = $this->viewData;
				$data ['index'] = $i;
				$data ['data'] = $item;
				$data ['widget'] = $this;
				$owner->renderFile ( $viewFile, $data );
				if ($j ++ < $n - 1)
					echo $this->separator;
			}
		} else
			$this->renderEmptyText ();
		echo CHtml::closeTag ( $this->itemsTagName );
	}
}

2,修改视图文件

<?php
	$this->widget ( 'application.components.MyCListView', array (
			'dataProvider' => $dataProvider,
			'itemView' => '_index/_index_view',
			'template' => "{items}\n{pager}",
			'itemsTagName' => 'table',
			'itemsThead' => array (
					'ID' => '5%',
					'姓名' => '10%',
					'手机' => '10%',
					'公司类型' => '10%',
					'操作' => '10%' 
			),
			'itemsCssClass' => 'table table-striped table-bordered table-hover text-center th_center',
			'pagerCssClass' => 'widget-foot',
			'pager' => array (
					'class' => 'CLinkPager',
					'nextPageLabel' => '下一页',
					'prevPageLabel' => '上一页',
					'firstPageLabel' => '首页',
					'lastPageLabel' => '末页',
					'htmlOptions' => array (
							'class' => 'pagination' 
					),
					'header' => '',
					'hiddenPageCssClass' => 'disabled',
					'selectedPageCssClass' => 'active' 
			) 
	) );
	?>

效果图如下:

2015-11-15_164105.gif