Yii2 之 [Gridview]小部件Widgets -- 超详细使用

267 阅读1分钟

Yii2 GridView是实现yii网格视图的小部件,一般用于报表视图的展示。今天,结合DataProvider(ArrayDataProvider以及SqlDataProvider)说一下GridView中的几个Columns(SerialColumn,DataColumn,ActionColumn)。

教程一

1.页面显示的时间戳转换

a.

    [
            'label'=>'创建日期',
            'attribute' => 'created_at',
            'filter' => false, //不显示搜索框
            'value' => function($data) {
                   return date('Y-m-d H:i:s',$data->created_at); }
    ],

b.

    [
            'label'=>'创建日期',
            'attribute' => 'created_at',
            'format' => ['date', 'php:Y-m-d H:i:s'],
    ],

2.为字段加超链接

    [ 
          'attribute'=>'title’,
          'format'=>'raw’,
          'value'=> function($data){return Html::a($data->title,['exam/index', 
                'id' => $data->_id],['title' => '审核']);} 
    ],
     
    [
         'label'=>'更多操作’, 
         'format'=>'raw’,
         'value' => function($data) { 
               $url = "http://www.baidu.com”; 
               return Html::a('添加权限组', $url, ['title' => '审核']); } 
    ],

3.下拉菜单搜索

    [
                'label' => '当前状态',
                'attribute' => 'status',
                'filter' => Html::dropDownList('AppBaseSearch[status
    ]',$searchModel-> status,
                        [ '' => '请选择',
                        ‘0' => '审核拒绝', 
                        ‘1' => '审核通过', 
    		]),
     
         'value' => function($date) {
                        switch ($date-> status) {
                            case 1';
                                return '审核通过';
                                break;
                            case ‘0';
                                return '审核拒绝';
                                break;
                            default:
                                return '未知状态';
                                break;
                        }
                    }
                ],

4.私人定制增删改按钮

[
                'header' => "查看/审核",
                'class' => 'yii\grid\ActionColumn',
                'template'=> '{view} {update} {delete}',
                'headerOptions' => ['width' => '140'],
                'buttons' => [
                    'view' => function ($url, $model, $key) {
                        return Html::a(Html::tag('span', '', ['class' => "glyphicon fa fa-eye"]), ['admin/view-app', 'id'=>$model->app_id], ['class' => "btn btn-xs btn-success", 'title' => '查看']);
                    },
                    'update' => function ($url, $model, $key) use($uid){
                          return Html::a('通过', ['admin/reviewapp','id'=>$model->app_id, 'status’=>1], ['class' => "btn btn-xs btn-info"]);
                    },
                    'delete' => function ($url, $model, $key) {
                            return Html::a('拒绝', ['admin/reviewapp', 'id' => $model->app_id, 'status’=>0], ['class' => "btn btn-xs btn-danger"]);
                    }
                ]
],

教程二

1. SerialColumn

SerialColumn就是连续的列,主要用于网格的行号,属于自增式的列。用法很简单:

echo GridView::widget([    'dataProvider' => $dataProvider,    'columns' => [        ['class' => 'yii\grid\SerialColumn'], // 连续编号        // 其他数据列和操作列    ]]);

展示结果:

| # | | 1 | | 2 |

2. DataColumn

DataColumn主要展示数据的,所有跟数据有关的展示基本都在这个Column中实现。因此用法也很多,但是有一条,如果对数据不做处理,那么字段必须是ArrayDataProvider对象的allModels的二维数组的key或者是SqlDataProvider对象sql查询结果二维数组的key。

用法一:表头即字段名,首字母大写

echo GridView::widget([    'dataProvider' => $dataProvider,    'columns' => [        'orderNo',   //订单编号        'username'   // 用户名    ]]);

展示结果:

图片.png

用法二:定义表头并格式化数据

echo GridView::widget([    'dataProvider' => $dataProvider,    'columns' => [        'time:date:日期',        'pv:raw:PV',        'uv:raw:UV',    ]]);

展示结果:

图片.png

用法三:数据过滤,classattributelabelformat均不是必须要的。class默认是yii\grid\DataColumnattribute是指定排序的字段key,一定是dataProvider中提供的数据的key,如果不指定,对于过滤的数据,不能点击表头排序。

echo GridView::widget([    'dataProvider' => $dataProvider,    'columns' => [        [        'value' => function($data) {            if (isset($data['time'])) {                return date('Y-m-d', $data['time']);            }        },        'attribute' => 'time', //用于排序,如果不写,不能点击表头排序,非必须        'label' => '日期', // 自定义表头,非必须        'format' => 'raw', // 格式方式,非必须        ],        'pv:raw:PV',        [        'class' => 'yii\grid\DataColumn',        'value' => function ($data) {            if (isset($data['orderCr'])) {                return ($data['orderCr'] * 100) . '%';            }        },        'attribute' => 'orderCr',        'label' => '下单转化率',        'format' => 'raw',    ],    ]]);
3. ActionColumn

ActionColumn是对一行数据进行操作的句柄。class指定处理的类,必须。 header指定表头显示,如果不写,默认为空。非必须。template中默认有三个:{view} {update} {delete},如果需要其他的,自行添加,比如下面添加了{onshelf} {offshelf}{robot}这三个。buttons除了默认的三个可以不写,其他都必须写。

echo GridView::widget([
    'dataProvider' => $dataProvider,
    'columns' => [
        [
            'class' => 'yii\grid\ActionColumn',
            'header' => '操作’,
            'template' => '{view} {update} {delete} {onshelf} {offshelf} {robot}',
            'buttons' => [
                'onshelf' => function ($url, $model, $key){
                    return    $model['status'] ? '' : Html::a('<span class="glyphicon glyphicon-ok"></span>',
                        ['item/shelf'],
                        ['title' => '上架商品', 'data' => ['method' => 'post', 'id' => $key, 'type' => 'on'], 'class'=> 'shelf']);
                },
                'offshelf' => function ($url, $model, $key){
                    return    $model['status'] ? Html::a('<span class="glyphicon glyphicon-remove"></span>',
                        ['item/shelf'],
                        ['title' => '下架商品', 'data' => ['method' => 'post', 'id' => $key, 'type' => 'off'], 'class'=> 'shelf']) : '';
                },
                
                'robot' => function ($url, $model, $key){
                    return     Html::a('<span class="glyphicon glyphicon-knight"></span>',
                        ['robot/like', 'id' => $model['pid'] ],
                        ['title' => '自动点赞', 'class' => 'post-autolike', 'data' => ['method' => 'post']]) ;
                },
            ]
        ],
    ],
]);

展示效果: 图片.png