关于Yii2中GridView的用法总结

双面人

发布于 2019-07-20 20:29:45

1.2K0

发布于 2019-07-20 20:29:45

文章被收录于专栏：热爱IT热爱IT

默认enableSorting为true，可以通过设置为false来取消此列排序功能，如下图。

1817550607-5b220de457a4c_articlex[1].jpg

A6.列的样式如何控制？

到现在你已经知道了5个使用GridView的技巧，我们继续，在A6中我们尝试改变表格某一列的样式。针对于列样式，GridView提供了3个属性，分别为headerOptions、contentOptions和footerOptions。

现在我们来做一个需求，将省市这一列个性化，列的头部编程红色，列的内容编程蓝色，如下

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20	try { echo GridView::widget([ 'dataProvider' => $dataProvider, 'columns'=>[ [ 'label'=>'省市', 'attribute'=>'province', 'enableSorting' => false, 'value'=>function($model){ return "{$model->province}-{$model->city}"; }, 'headerOptions' => ['style'=>'color:red'], 'contentOptions' => ['style'=>'color:blue'], ] ] ]); }catch(\Exception $e){ // todo }

是的，使用这一列的headerOptions和contentOptions即可

3581100424-5b220df2a6267_articlex[1].jpg

有个要注意的地方，我们使用浏览器的f12看看标注颜色的列。

1743074111-5b220e0014fb3_articlex[1].jpg

你看到了，headerOptions和contentOptions直接作用到了th和td标签，为其增加类似于style等属性，因此如果你的th或td标签中还有其他的html标签，直接定义style就无法生效了，此时可以通过css类解决这个问题。

A7.关于GridView中footerOptions的使用。

在A6中我们说GridView的列有一个footerOptions属性，那么这个属性是干嘛用的那？从单词上分析是控制列footer的属性（比如样式等等），但是footer在哪里？？？在哪里在哪里？

需要先设置GridView的showFooter等于true才可以。才可以才可以。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

try { echo GridView::widget([ 'dataProvider' => $dataProvider, 'columns'=>[ [ 'label'=>'省市', 'attribute'=>'province', 'enableSorting' => false, 'value'=>function($model){ return "{$model->province}-{$model->city}"; }, 'headerOptions' => ['style'=>'color:red'], 'contentOptions' => ['style'=>'color:blue'], 'footerOptions'=>['style'=>'color:yellow'] ] ], 'showFooter'=>true ]); }catch(\Exception $e){ // todo }

在showFooter=true的天空下，列的footerOptions才能自由飞翔。

4137986696-5b220e0c2bd7a_articlex[1].jpg

从原理上说，'showFooter'=>true的结果是让table出现了下面代码

1 2 3 4 5 6 7	<tfoot> <tr> <td></td> <td></td> <td></td> <tr> </tfoot>

因此每列的footerOptions就控制着在tfoot中这一列对应的td。

A8.footerRowOptions你是干毛用的？

在我们大摇大摆的用着A8中的showFooter的时候，突然PhpStorm自动关联出一个footerRowOptions，这是个什么东西那？

footerRowOptions是GridView的属性，它控制着tfoot的tr标签属性，简单点说，你最后在tfoot上每个单元格看到的效果是footerRowOptions + footerOptions 的结合体（就style而言）。

比如针对上面的例子我们在配置下footerRowOptions

1	'footerRowOptions'=>['style'=>'font-size:20px;']

则你会发现黄色字体变成了20px。

要注意：A6、A7和A8中的这些xxxOptions所能控制的是标签的属性，不单单是style。

A9.showFooter的大家族

从A7中我们知道了GridView的showFooter，它决定这table是否显示tfoot信息，除此之外show家族还有一些其他成员。

showHeader 可以控制table的头部是否显示，默认显示。
showOnEmpty 当数据为空的时候，table框架是否存在，默认不存在。

A10.魔术师visible的戏法

这个片段我们说下GridView列的visible属性，此属性默认为true代表此列显示，通过设置visible属性可以隐藏一列，这种隐藏非css的display:none，而是在渲染表格的时候就去掉了此列。

你可能会问，如果我要使用visible来隐藏一列，我不写这一列不就好了么？

是的，你的思路没错，但是visible是可以传递一个表达式，实现逻辑判断，比如下面的需求当1号管理员登录的时候可以看到省市一列。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20	try { echo GridView::widget([ 'dataProvider' => $dataProvider, 'columns'=>[ [ 'label'=>'省市', 'attribute'=>'province', 'enableSorting' => false, 'value'=>function($model){ return "{$model->province}-{$model->city}"; }, 'visible'=>(Yii::$app->admin->id === 1) ] ], 'showFooter'=>true ]); }catch(\Exception $e){ // todo }

A1-A10 我们重点说的是GridView每列的公共属性，这并不是全部，针对于不同类型的列还有会其他的属性，比如DataColumn、ActionColumn、CheckboxColumn等等，针对于不同类型列的讲解，要后续放出。

GridView

接下来我们进入B系列，B系列的重点在讲解GridView。

B1 关于布局layout

默认情况下GridView的布局如下图

这个布局来自于GridView的layout属性，我们可以改变这个模板，比如要去掉summary。

1 2 3 4 5 6 7 8 9 10 11 12	try { echo GridView::widget([ 'dataProvider' => $dataProvider, 'columns'=>[ ], 'layout'=>"{items}\n{pager}" ]); }catch(\Exception $e){ // todo }

layout内有5个可以使用的值，分别为{summary}、{errors}、{items}、{sorter}和{pager}。

B2.指定列默认的类型 dataColumnClass

在一个表格中每列都有不同的作用，有的是数据类型的、有的是复选框类型，具体有5种

ActionColumn
CheckboxColumn
DataColumn
RadioButtonColumn
SerialColumn

通过GridView可以设置一列的默认类型，当然你可以针对特殊的类单独指定其class。

1 2 3 4 5 6 7 8 9 10 11 12	try { echo GridView::widget([ 'dataProvider' => $dataProvider, 'columns'=>[ ], 'dataColumnClass'=>"yii\grid\DataColumn" ]); }catch(\Exception $e){ // todo }

B3.caption属性

我们可以通过设置GridView的caption属性来实现table的caption功能，作为table用途非常有用。

1 2 3 4 5 6 7 8 9 10 11	try { echo GridView::widget([ 'dataProvider' => $dataProvider, 'columns'=>[ ], 'caption'=>"会员列表" ]); }catch(\Exception $e){ // todo }

效果图如下

4006144808-5b220e3e9da7c_articlex[1].jpg

当然不用多说，GridView也提供了captionOptions属性来让你控制caption的属性。

B4.tableOptions和options属性

这两个属性有的开发者可能会混淆，接下来我用一张图让你瞬间明白。

2438330366-5b220e5e9d146_articlex[1].jpg

就是说GridView渲染的时候首先弄出来一个p容器，这是这个GridView的代表，接下来在此容器内放各种元素，比如{summary}、{items}等等。

options 控制着p容器的属性，默认添加一个class="grid-view"
tableOptions 控制着{items}表格的属性，默认为其添加一个 class="table table-striped table-bordered"

现在你会改table的样式类了么？

B5.一堆好基友 headerRowOptions 和 footerRowOptions

我们在A8中讲了footerRowOptions的用法，headerRowOptions的用法和它一样，只不过它管理的是thead下tr的属性。

B6.rowOptions

学会了B5，你可能看着rowOptions一眼识破，没错它的目的就是管理tbody下的每个tr，但是它更强大，除了直接接收一个数组外还能传入匿名函数。

你可以融入你的逻辑，比如现在我们要用rowOptions实现隔行换色的功能，来吧。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15	try { echo GridView::widget([ 'dataProvider' => $dataProvider, 'columns'=>[ ], 'rowOptions'=>function($model,$key, $index){ if($index%2 === 0){ return ['style'=>'background:red']; } } ]); }catch(\Exception $e){ // todo }

目的达到，看效果

3365928132-5b220e52b6eb3_articlex[1].jpg

对于rowOptions接收的匿名行数的4个形参，这里说明一下

$model: 当前被渲染的对象
$key: 当前对象的逐渐
$index: 针对于当前页面，从0开始，逐行加1
$grid: GridView对象

B7. beforeRow和afterRow

这是一对非常灵活的属性，它们接收一个匿名函数。分别表示在渲染了一行之前和之后发生点什么？当然具体发生什么由你来决定。

要记住的是，匿名函数返回的结果也会作为一行纳入到渲染过程，比如当我们遇到奇数的时候就在此行下面添加一行，可以如下代码

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18	try { echo GridView::widget([ 'dataProvider' => $dataProvider, 'tableOptions' => ['class'=>'table table-bordered'], 'columns'=>[ 'id', 'username:text:用户名', ..... ], 'afterRow'=>function($model,$key, $index,$grid){ if(($index+1)%2 != 0){ return "<tr><td colspan='4'>我是基数</td></tr>"; } } ]); }catch(\Exception $e){ // todo }

非常好，得到了我们想要的结果

2924391307-5b220e6c003f3_articlex[1].jpg

B8. 两个小盆友placeFooterAfterBody & emptyCell

很细节的两个小属性

placeFooterAfterBody 当我们要显示footer的时候，placeFooterAfterBody属性决定将此html放到table的什么位置，默认放到header后面，你可以选择placeFooterAfterBody=true来让footer放到body后面。此功能是在yii2.0.14才支持的。
emptyCell 又是一个小细节，如果一个单元格为空，用什么字符填充那？默认是 &nbsp，你可以重新指定。

小结

不知不觉写了3000多字，本想一篇完成GridView的讲解，现在看来比较困难，毕竟还有很多类型的列要去研究分享，还是变成专题吧，接下来我会对每个列做单独的分析，希望对你有用。

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

网站

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

网站

登录后参与评论

0 条评论

热度