Yii2的相关学习记录,Gridview小部件使用及kartik-v/yii2-grid扩展(五),yii2gridview
现在记录下Gridview的相关内容,也是强迫症犯了,Yii2自带的Gridview虽然不错,但是过滤栏如果一些字段用不着,不会自动合并成一行,当然也可以过滤栏不用,而是在最上方自己写一些需要检索的数据,但是这样很麻烦,还要自己去规划样式,写检索什么的。正好在搜索将检索栏和标题合并时,看到了kartik-v/yii2-grid可以实现这些功能,而且还自带导出excel、csv等数据,所以也顺便试了下它的功能,调出了自己喜欢的样式。在用kartik-v的Gridview之前我们还是要了解Yii2自带的Gridview的功能的,大体常用的一些方法如下:
1、Yii默认有四种样式的列,分别为Data column(默认)、Action column(操作)、Checkbox column(可选中)、Serial column(带序列号)

2、标题名字会根据Model中的attributeLabels()方法,来自动替换成对应的中文。当然也可以通过‘label’来自己定义,而‘attribute’则是指定根据哪个字段排序。其它的像是'visible'来隐藏显示,'header'显示头部内容,'headerOptions'来定义css或style样式等等。
1 2 3 4 5 | <span>[
</span> 'label' => '你想要的名称' ,
'attribute' => 'id' ,<span>
<span>]
</span>
|
Copier après la connexion
3、自定义显示页数和排序字段,如果用到了searchModel,则需要在searchModel的search方法中定义,否则,需要在Controller中定义:
1 2 3 4 5 6 7 | <span> $dataProvider </span> = <span> new </span><span> ActiveDataProvider([
</span> 'query' => <span> $query </span>,
'pagination' =><span> [
</span> 'pageSize' => 15,<span>
],
'sort' => [ 'attributes' => [ 'id' ]],<span>
]);
|
Copier après la connexion
4、下拉菜单检索,好比根据下拉菜单检索用户状态,则需要先在model中定义相关的方法,然后在Gridview中再做处理:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <span>
<span> const </span> STATUS_DELETED = 0<span>;
</span><span> const </span> STATUS_ACTIVE = 10<span>;
</span><span> public </span> <span> static </span> <span> function </span> getZhStatus(<span> $status </span>=<span>false</span><span>){
</span><span> $status_array </span>=<span> [
</span> '' => '请选择' ,<span>
self</span>::STATUS_DELETED=> '禁止' ,<span>
self</span>::STATUS_ACTIVE=> '正常' <span>
];
</span><span> return </span> <span> $status </span>==<span>false</span>?<span> $status_array </span>:ArrayHelper::getValue(<span> $status_array </span>,<span> $status </span>, '未知' <span>);
}
</span><span>
<span>[
</span> 'attribute' => 'status' ,
'filter' =>Html::activeDropDownList(<span> $searchModel </span>, 'status' ,User::getZhStatus(),[ 'class' => 'form-control ' ]),
'value' =><span> function </span>(<span> $data </span><span>){
</span><span> return </span> User::getZhStatus(<span> $data </span>-><span>status);
}</span>,<span>
]</span>,
|
Copier après la connexion
5、格式化时间,有好几种方法:
方法一:类似上面的定义回调函数
1 2 3 4 5 6 | <span>[
</span> 'attribute' => 'created_at' ,
'value' =><span> function </span>(<span> $data </span><span>){
</span><span> return </span> <span> date </span>( 'Y-m-d' ,<span> $data </span>-><span>created_at);
}</span>,<span>
]</span>
|
Copier après la connexion
方法二:用Gridview自带的format配置
1 2 3 4 5 | <span>[
</span> 'attribute' => 'created_at' ,
'format' =>[ 'date' , 'php:Y-m-d' ],
'value' => 'created_at' ,<span>
]</span>,
|
Copier après la connexion
方法三:首先在config中配置好你的时间格式,否则会是英文格式的,然后再在Gridview中处理。
1 2 3 4 5 6 7 8 9 10 | <span>
'components' =><span> [
</span> 'formatter' =><span> [
</span> 'dateFormat' => 'yyyy-MM-dd' ,
'datetimeFormat' => 'yyyy-MM-dd HH:mm:ss' ,
'decimalSeparator' => ',' ,
'thousandSeparator' => ' ' ,
'currencyCode' => 'CNY' ,<span>
]</span>,<span>
]</span>,
|
Copier après la connexion
这里用到了快速写的一种方式:“attribute:format:label”(属性:格式:标签)这种格式,详情点击这里的api文档。所以我们这样就可以了:(如果定义了上方,则方法二可以直接'format'=>'date'即可以正确显示)
Copier après la connexion
6、显示超链接或图片,都是用的回调函数的方法,这里以超链接为例,注意format需要为'raw’,不对结果做任何格式化处理,具体的格式化方面可以点这里看看。
1 2 3 4 5 6 7 | <span>[
</span> 'attribute' => 'id' ,
'value' =><span> function </span>(<span> $model </span>, <span> $key </span>, <span> $index </span>, <span> $column </span><span>){
</span><span> return </span> Html::a(<span> $model </span>->id,[ 'user/view' , 'id' =><span> $model </span>->id],[ 'class' => 'profile-link' , 'target' => '_blank' <span>]);
}</span>,
'format' => 'raw' ,<span>
]</span>,
|
Copier après la connexion
7、关联表单显示,这个地方直接看指南吧,点这里看,总之就是如果管理表单设置好后,直接用类似order.name这种就可以直接显示使用,如果想要检索排序,则需要在searchModel的rulers规则方法和attributes
属性方法中将此字段写入,在search方法中添加andFilterWhere的检索,以及用$query->joinWith关联字段,$dataProvider->sort->attributes[]添加排序等。
8、自定义Action Column按钮,
1 2 3 4 5 6 7 8 9 10 11 | <span>[
</span> 'class' => 'yii\grid\ActionColumn' ,
'header' => '操作' ,
'headerOptions' =>[ 'width' => '120' ],
'template' => '{view} {update} {delete} {forbid} ' ,
'buttons' =><span>[
</span> 'forbid' =><span> function </span>(<span> $url </span>,<span> $model </span><span>){
</span><span> return </span> Html::<span>a( '<i class="glyphicon glyphicon-remove-circle"></i>' ,[ 'user/forbid' , 'id' => $model ->id]);
}
]</span>,<span>
]</span>
|
Copier après la connexion
以上是Yii2自带的Gridview的用法。再说下kartik-v/yii2-grid,官方文档及demo讲的比较全了,它比原生的多了几个列的形式,例如Editable Column(可编辑)、Radio Column(单选框)等,还多了一些其它功能,例如滚动时可以固定标题栏方便查看、可以总计、导出svn,excel等格式。这里稍微说下:
一开始安装完成后可能会报错pdf错误,因为这些关联的还没有安装,可以按照提示安装也可以先配置'export'=>false来取消导出功能,下面导出时会详细配置。
1、整体结构如下图: