今天在项目中要实现表格的翻页功能，很自然联想到Yii框架后台admin页面的gridview视图，也是表格的形式展示所有内容，然后有分页功能，所以准备借鉴其实现思路来实现。

由于在具体的实现过程中，涉及到很多前台样式及界面的修改，功能的增删，Yii内置的CGridView已经不足以完全满足我的需求，所以首先要开刀的就是继承CGridView实现一个自己的挂件类TGridView，主要是删除一些内置的class及id，在CGridView中渲染表格单元还调用到CDataColumn及CGridColumn，所以一并自定义了TDataColumn和TGridColumn（分别继承自CDataColumn和CGridColumn，其中CDataColumn继承自CGridColumn，这里我的处理方式是TDataColumn继承自TGridColumn，TGridColumn继承自CGridColumn），这样一套下来完成整个gridview生成表格的界面及功能的自定义，具体代码如下：

TGridView.php：

class TGridView extends CGridView{
protected function initColumns()
{
if($this->columns===array())
{
if($this->dataProvider instanceof CActiveDataProvider)
$this->columns=$this->dataProvider->model->attributeNames();
elseif($this->dataProvider instanceof IDataProvider)
{
// use the keys of the first row of data as the default columns
$data=$this->dataProvider->getData();
if(isset($data[0]) && is_array($data[0]))
$this->columns=array_keys($data[0]);
}
}
$id=$this->getId();
foreach($this->columns as $i=>$column)
{
if(is_string($column))
$column=$this->createDataColumn($column);
else
{
if(!isset($column['class']))
$column['class']='CDataColumn';
$column=Yii::createComponent($column, $this);
}
if(!$column->visible)
{
unset($this->columns[$i]);
continue;
}
$this->columns[$i]=$column;
}

foreach($this->columns as $column)
$column->init();
}

public function renderItems()
{
if($this->dataProvider->getItemCount()>0 || $this->showTableOnEmpty)
{
echo "\n";
$this->renderTableHeader();
ob_start();
$this->renderTableBody();
$body=ob_get_clean();
$this->renderTableFooter();
echo $body; // TFOOT must appear before TBODY according to the standard.
echo "

TDataColumn.php:

class TDataColumn extends TGridColumn{
protected function renderHeaderCellContent()
{
if($this->grid->enableSorting && $this->sortable && $this->name!==null)
echo $this->grid->dataProvider->model->getAttributeLabel($this->name);  //去除掉默认生成的Header链接
elseif($this->name!==null && $this->header===null)
{
if($this->grid->dataProvider instanceof CActiveDataProvider)
echo CHtml::encode($this->grid->dataProvider->model->getAttributeLabel($this->name));
else
echo CHtml::encode($this->name);
}
else
parent::renderHeaderCellContent();
}
protected function renderDataCellContent($row,$data)
{
if($this->value!==null)
$value=$this->evaluateExpression($this->value,array('data'=>$data,'row'=>$row));
elseif($this->name!==null)
$value=CHtml::value($data,$this->name);
echo $value===null ? $this->grid->nullDisplay : $this->grid->getFormatter()->format($value,$this->type);
}
}

TGridColumn.php

class TGridColumn extends CGridColumn{
public $name;   //列名对应model的属性名
public $value;   //列值对应model的属性值
public $type='text';
public function renderHeaderCell()
{
if($this->name=='xxx'):
echo '';
elseif($this->name=='xxxx'):
echo '';
elseif($this->name=='xxxxx'):
echo '';
else:
echo '';
endif;
$this->renderHeaderCellContent();
echo "";
}
public function renderDataCell($row)
{
$data=$this->grid->dataProvider->data[$row];
$options=$this->htmlOptions;
if($this->cssClassExpression!==null)
{
$class=$this->evaluateExpression($this->cssClassExpression,array('row'=>$row,'data'=>$data));
if(!empty($class))
{
if(isset($options['class']))
$options['class'].=' '.$class;
else
$options['class']=$class;
}
}
echo CHtml::openTag('td',$options);
$this->renderDataCellContent($row,$data);
echo '';
}
}

这些自定义类都放在/protected/components目录下，供视图调用：

widget('TGridView', array(
'summaryText'=>'',
'dataProvider'=>$dataProvider,
'enableSorting'=>false,
'pager'=>array('class'=>'TPLinkPager',
'maxButtonCount'=>10,
'htmlOptions'=>array('class'=>'paging'),
'header'=>'',
'prevPageLabel' => '上一页',
'nextPageLabel' => '下一页', ),
'columns'=>array(
'id',
'partner',
'pname',
'type.name',
),
)); ?>

这里Yii内置的分页类是CLinkPager，同样因为不满足我的需求，我自定义了一个继承自TLinkPager（继承自CLinkPager）的类（这个类的定义在Yii框架中使用CLinkPager实现分页功能中有详细叙述，TPLinkPager主要去掉了跳转到指定页面的功能）。

Yii后台admin.php页面中dataProvider来自model->search()方法，这里因为我去掉了sort的功能，所以不必要通过search方法，我是通过控制器传递过来的变量$dataProvider提供数据支持：

$dataProvider=new CActiveDataProvider('model名称', array(
'criteria'=>array(
'order'=>'id ASC',
),
'pagination'=>array(
'pageSize'=>10,   //每页显示10条记录
),
));

至此完成了整个的自定义CGridView过程，效果图如下所示：