如何在 YII 设置 CGridView 的分页样式?
在 cgridview 中,它按图片显示寻呼机。
我想通过以下方式显示寻呼机位置。
第一个 上一个 1 2 3 4 5 6 7 8 9 10 下一个 最后一个
我想删除“转到页面:”。
我应该怎么做?
只需将header
寻呼机的属性设置为空字符串。
例子:
$this->widget('zii.widgets.CGridView', array(
// ...other properties here...
'pager' => array('class' => 'CLinkPager', 'header' => ''),
));
如果您只需要更改样式,则应编写自己的 css 文件并将其应用到 gridView(见文末)。但是,如果您的更改比这更深,您将不得不扩展寻呼机。
我很久以前就这样做了:我扩展了 Link Pager 以满足我的需要。在components
目录中,我创建了一个新的寻呼机:
class PagerSA extends CLinkPager
我重写了一些方法以适应我想要的(修改真的很小)。这是我的代码,您可以作为示例。正如我所说,我从原始寻呼机中修改了很少的东西。如果您的寻呼机与 aCLinkPager
或 a有很大不同,CListPager
您应该扩展CBasePager
class PagerSA extends CLinkPager
{
const CSS_FIRST_PAGE='first';
const CSS_LAST_PAGE='last';
const CSS_PREVIOUS_PAGE='previous';
const CSS_NEXT_PAGE='next';
const CSS_INTERNAL_PAGE='page';
const CSS_HIDDEN_PAGE='hidden';
const CSS_SELECTED_PAGE='selected';
/**
* @var integer maximum number of page buttons that can be displayed. Defaults to 10.
*/
public $maxButtonCount=5;
/**
* @var string the text label for the next page button. Defaults to 'Next >'.
*/
public $nextPageLabel;
/**
* @var string the text label for the previous page button. Defaults to '< Previous'.
*/
public $prevPageLabel;
/**
* @var string the text label for the first page button. Defaults to '<< First'.
*/
public $firstPageLabel;
/**
* @var string the text label for the last page button. Defaults to 'Last >>'.
*/
public $lastPageLabel;
/**
* @var string the text shown before page buttons. Defaults to 'Go to page: '.
*/
public $header;
/**
* @var string the text shown after page buttons.
*/
public $footer='';
/**
* @var mixed the CSS file used for the widget. Defaults to null, meaning
* using the default CSS file included together with the widget.
* If false, no CSS file will be used. Otherwise, the specified CSS file
* will be included when using this widget.
*/
public $cssFile;
/**
* @var array HTML attributes for the pager container tag.
*/
public $htmlOptions=array();
/**
* Initializes the pager by setting some default property values.
*/
public function init()
{
if($this->nextPageLabel===null)
$this->nextPageLabel=Yii::t('yii','Suivante >');
if($this->prevPageLabel===null)
$this->prevPageLabel=Yii::t('yii','< Précédente');
if($this->firstPageLabel===null)
$this->firstPageLabel=Yii::t('yii','<< Première');
if($this->lastPageLabel===null)
$this->lastPageLabel=Yii::t('yii','Dernière >>');
if($this->header===null)
$this->header=Yii::t('yii','');
if(!isset($this->htmlOptions['id']))
$this->htmlOptions['id']=$this->getId();
if(!isset($this->htmlOptions['class']))
$this->htmlOptions['class']='yiiPager';
}
/**
* Creates the page buttons.
* @return array a list of page buttons (in HTML code).
*/
protected function createPageButtons()
{
if(($pageCount=$this->getPageCount())<=1)
return array();
list($beginPage,$endPage)=$this->getPageRange();
$currentPage=$this->getCurrentPage(false); // currentPage is calculated in getPageRange()
$buttons=array();
// first page
$buttons[]=$this->createPageButton($this->firstPageLabel,0,self::CSS_FIRST_PAGE,$currentPage<=0,false);
// prev page
if(($page=$currentPage-1)<0)
$page=0;
$buttons[]=$this->createPageButton($this->prevPageLabel,$page,self::CSS_PREVIOUS_PAGE,$currentPage<=0,false);
//2 first pages
if($currentPage==3)
{
$buttons[]=$this->createPageButton(1,0,self::CSS_INTERNAL_PAGE,false,0==$currentPage);
$buttons[]= ' ... ';
}
if($currentPage>3)
{
$buttons[]=$this->createPageButton(1,0,self::CSS_INTERNAL_PAGE,false,0==$currentPage);
$buttons[]=$this->createPageButton(2,1,self::CSS_INTERNAL_PAGE,false,1==$currentPage);
$buttons[]= ' ... ';
}
// internal pages
for($i=$beginPage;$i<=$endPage;++$i)
$buttons[]=$this->createPageButton($i+1,$i,self::CSS_INTERNAL_PAGE,false,$i==$currentPage);
//3 lasts pages
if($endPage<$pageCount-2)
{
$buttons[]= ' ... ';
for($i=$pageCount-2;$i<=$pageCount-1;++$i)
$buttons[]=$this->createPageButton($i+1,$i,self::CSS_INTERNAL_PAGE,false,$i==$currentPage);
}
if($endPage==$pageCount-2)
{
$buttons[]= ' ... ';
$buttons[]=$this->createPageButton($pageCount,$pageCount-1,self::CSS_INTERNAL_PAGE,false,$pageCount-1==$currentPage);
}
// next page
if(($page=$currentPage+1)>=$pageCount-1)
$page=$pageCount-1;
$buttons[]=$this->createPageButton($this->nextPageLabel,$page,self::CSS_NEXT_PAGE,$currentPage>=$pageCount-1,false);
// last page
$buttons[]=$this->createPageButton($this->lastPageLabel,$pageCount-1,self::CSS_LAST_PAGE,$currentPage>=$pageCount-1,false);
return $buttons;
}
}
然后要将它应用到您的 c 网格视图中,您必须输入以下内容:
'pager' => array(
'class' => 'SaAdminPager',
'cssFile'=>'/themes/version_3/css/widgets/adminPager.css',
'header'=>'',
),
'pagerCssClass'=>'pagination pagination-centered',
$this->widget('bootstrap.widgets.TbGridView',array(
'id'=>'grid-view',
'htmlOptions'=>array('style'=>'margin-top:95px;'),
'dataProvider'=>$model->search(),
'type'=>'striped bordered condensed',
'filter'=>$model,
'columns'=>array(
......
.......
));
echo 'Goto Page '.CHtml::textField(ucfirst(Yii::app()->controller->id)."_page",'1',
array('id'=>'jump-to-page',
));
?>
<script>
$('#jump-to-page').change(function(e){
$.fn.yiiGridView.update('grid-view', {
data: $(this).serialize()
});
e.preventDefault();
});
</script>