默认enableSorting为true,可以通过设置为false来取消此列排序功能,如下图。
到现在你已经知道了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即可
有个要注意的地方,我们使用浏览器的f12看看标注颜色的列。
你看到了,headerOptions和contentOptions直接作用到了th和td标签,为其增加类似于style等属性,因此如果你的th或td标签中还有其他的html标签,直接定义style就无法生效了,此时可以通过css类解决这个问题。
在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才能自由飞翔。
从原理上说,'showFooter'=>true的结果是让table出现了下面代码
1 2 3 4 5 6 7 | <tfoot> <tr> <td></td> <td></td> <td></td> <tr> </tfoot> |
---|
因此每列的footerOptions就控制着在tfoot中这一列对应的td。
在我们大摇大摆的用着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。
从A7中我们知道了GridView的showFooter,它决定这table是否显示tfoot信息,除此之外show家族还有一些其他成员。
这个片段我们说下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等等,针对于不同类型列的讲解,要后续放出。
接下来我们进入B系列,B系列的重点在讲解GridView。
默认情况下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}。
在一个表格中每列都有不同的作用,有的是数据类型的、有的是复选框类型,具体有5种
通过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 } |
---|
我们可以通过设置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 } |
---|
效果图如下
当然不用多说,GridView也提供了captionOptions属性来让你控制caption的属性。
这两个属性有的开发者可能会混淆,接下来我用一张图让你瞬间明白。
就是说GridView渲染的时候首先弄出来一个p容器,这是这个GridView的代表,接下来在此容器内放各种元素,比如{summary}、{items}等等。
现在你会改table的样式类了么?
我们在A8中讲了footerRowOptions的用法,headerRowOptions的用法和它一样,只不过它管理的是thead下tr的属性。
学会了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 } |
---|
目的达到,看效果
对于rowOptions接收的匿名行数的4个形参,这里说明一下
$model
: 当前被渲染的对象
$key
: 当前对象的逐渐
$index
: 针对于当前页面,从0开始,逐行加1
$grid
: GridView对象
这是一对非常灵活的属性,它们接收一个匿名函数。分别表示在渲染了一行之前和之后发生点什么?当然具体发生什么由你来决定。
要记住的是,匿名函数返回的结果也会作为一行纳入到渲染过程,比如当我们遇到奇数的时候就在此行下面添加一行,可以如下代码
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 } |
---|
非常好,得到了我们想要的结果
很细节的两个小属性
不知不觉写了3000多字,本想一篇完成GridView的讲解,现在看来比较困难,毕竟还有很多类型的列要去研究分享,还是变成专题吧,接下来我会对每个列做单独的分析,希望对你有用。