今天在项目中要实现表格的翻页功能,很自然联想到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过程,效果图如下所示: