[yii2小心肝儿]GridView-睡衣篇 [ 技术分享 ]

GridView-睡衣篇

书接上回，这节我们将扒掉GridView的睡衣，越来越少了~

上回我兴高采烈的拿着修改后的结果给客户看，结果客户看后露出了囧字脸，说了句："小北啊，再改改吧"。

上回结果

这次客户说了这些话

• 为何没有会员的时候显示"No results found."，应该显示"当前没有会员"啊,对对，字体是红色，加粗，必须加粗。
• 为啥显示"Showing 1-2 of 4 items."，这些都去掉吧。
• 啊对，为啥没有数据的时候表格还是显示，不要，整个表格消失，只是显示"当前没有会员"
• 能不能每行加个选择，然后还有个全选，批量删除，那样多高大上~

回到自己的MAC前，烧根香，祝客户今天去厕所忘记带纸，开始改吧~

(￣.￣)(￣.￣)(￣.￣)(￣.￣)(￣.￣)(￣.￣)

第一条很好改，GridView提供了emptyText和emptyTextOptions两个字段可以实现,emptyText代表$dataProvider没有数据时候显示的信息，emptyTextOptions决定这个显示信息的Html属性，emptyTextOptions接受一个数组。

开始修改。

    <?= GridView::widget([
        'dataProvider' => $dataProvider,
        'columns' => [
            'id',
            'username',
            [
                'attribute'=>'create_time',
                'format'=>['date', 'php:Y-m-d H:i:s']
            ],
            [
                'attribute'=>'sex',
                'value'=>function($data){
                    return $data->sex == 1 ? '男' : '女';
                }
            ],
            'province',
            'city'
        ],
        'emptyText'=>'当前没有会员',
        'emptyTextOptions'=>['style'=>'color:red;font-weight:bold']
    ]);?>

两行搞定，看看结果

(￣.￣)(￣.￣)(￣.￣)(￣.￣)(￣.￣)(￣.￣)

第二条客户要去掉"Showing 1-2 of 4 items."

我知道GridView提供了一个layout布局属性，可以用这个满足客户的需求，先啰嗦几句，我们知道GridView渲染到浏览器后有3部分

• 一个表格，承载控制器传来的数据
• 一个分页，在表格下放
• 一个简介，类似于Showing 1-2 of 4 items.这样

类似于上图这样，而layout就是决定这些部分的摆放位置（堆积木），layout接收字符串，默认情况为。

    'layout' => "{summary}\n{items}\n{pager}"

如代码所示，GridView自上而下是简介，表格，分页。那么我们知道了，解决客户需求只需要重新布局layout，去掉{summary}即可。

    <?= GridView::widget([
        'dataProvider' => $dataProvider,
        'columns' => [
            'id',
            'username',
            [
                'attribute'=>'create_time',
                'format'=>['date', 'php:Y-m-d H:i:s']
            ],
            [
                'attribute'=>'sex',
                'value'=>function($data){
                    return $data->sex == 1 ? '男' : '女';
                }
            ],
            'province',
            'city'
        ],
        'emptyText'=>'当前没有会员',
        'emptyTextOptions'=>['style'=>'color:red;font-weight:bold'],
        'layout'=>"{items}\n{pager}"
    ]);?>

刷新浏览器

太酷了，轻松搞定，去休息下~

最近北哥在看一本书叫做《把时间当做朋友》李笑来著，讲心智的力量，推荐大家读读。

10分钟后，我回到了MAC前继续我的工作。现在要处理的是当无数据时表格也消失的问题。

我不得不为yii2点个赞，太多细节点ta都想到了，showOnEmpty贴心小属性正式露脸。 通过设置showOnEmpty的true/false可以决定当数据不存在的时候，表格是否出现，默认为真（显示）。

修改前无数据时：

现在开始改代码（增加showOnEmpty为false）

    <?= GridView::widget([
        'dataProvider' => $dataProvider,
        'columns' => [
            'id',
            'username',
            [
                'attribute'=>'create_time',
                'format'=>['date', 'php:Y-m-d H:i:s']
            ],
            [
                'attribute'=>'sex',
                'value'=>function($data){
                    return $data->sex == 1 ? '男' : '女';
                }
            ],
            'province',
            'city'
        ],
        'emptyText'=>'当前没有会员',
        'emptyTextOptions'=>['style'=>'color:red;font-weight:bold'],
        'layout'=>"{items}\n{pager}",
        'showOnEmpty'=>false
    ]);?>

看看修改后的结果

真的没了，用yii2，一起变得简单，和谐社会就是好~

(￣.￣)(￣.￣)(￣.￣)(￣.￣)(￣.￣)(￣.￣)

Last One,最后一条 能不能每行加个选择，然后还有个全选，批量删除，那样多高大上~，当然删除的具体功能是其他人的事情，我只解决全选问题，这里要多说一些话。 大家一定记得在大衣篇里，我们将GridView的columns接收一个数组，每个数组项代表一列，我们可以为列传递一个模型的属性值，也可以传递一个数组。

    <?= GridView::widget([
        'dataProvider' => $dataProvider,
        'columns' => [            
            [
                'attribute'=>'create_time',
                'format'=>['date', 'php:Y-m-d H:i:s']
            ],            
        ]
    ]);?>

类似于上面代码，其实对于每列的这个数组，ta是有类别的，我们默认使用其中的DataColumn，代表显示数据。DataColumn还有几个兄弟，分别是

• ActionColumn 显示操作按钮等
• CheckboxColumn 显示复选框
• RadioButtonColumn 显示单选框
• SerialColumn 显示行号

好，就用CheckboxColumn来解决，看全部代码

    <?= GridView::widget([
        'dataProvider' => $dataProvider,
        'columns' => [
            [
                'class'=>'yii\grid\CheckboxColumn'
            ],
            'id',
            'username',
            [
                'attribute'=>'create_time',
                'format'=>['date', 'php:Y-m-d H:i:s']
            ],
            [
                'attribute'=>'sex',
                'value'=>function($data){
                    return $data->sex == 1 ? '男' : '女';
                }
            ],
            'province',
            'city'
        ],
        'emptyText'=>'当前没有会员',
        'emptyTextOptions'=>['style'=>'color:red;font-weight:bold'],
        'layout'=>"{items}\n{pager}",
        'showOnEmpty'=>false
    ]);?>

刷新浏览器看结果

方便的不要不要的~(￣▽￣)~(￣▽￣)~，至于其他几个属性，大家可以替换试试，真心很方便。

不说了，快下班了~赶紧拿给客户看~

看着客户（郑讯）诡异的眼神和贱贱的表情，我内心如滔滔江水~~~，管他那，我是下班了，等到 GridView-底裤篇在和你继续折腾吧。

原文谅解：http://www.maomaonv.com/question-view.html?id=10 小心肝儿系列Github开源书：https://github.com/abei2017/small-yii2 欢迎帮忙点星星