YII2小部件GridView用法

YII2小部件GridView用法

配置项

<?= GridView::widget([
    'dataProvider' => $dataProvider,//数据源提供
    'filterModel' => $searchModel,//过滤器
    'tableOptions' => [],//表格样式
    'filterRowOptions'=>['class' => 'filters'],//搜索框的class
    'headerRowOptions' => ['class'=>'abc'],//排序行的属性
    'id' => 'idss',//设置table外的div的id
    'options' => ['name' => 'options'],//设置table外的div的属性
    'pager' => [],//分页样式
    'showFooter' => false,//是否显示tfoot
    'placeFooterAfterBody' => false,
    'rowOptions' => ['name'=>'rowOptionsss'],//给每个tr加属性
    'showHeader' => true,//是否显示表头(搜索行与th行)
    'layout' => "{summary}\n{items}\n{pager}",//板块//layout有5个值，分别为{summary}、{errors}、{items}、{sorter}和{pager}。
    'summary' => "{begin}-{end}-{count}-{totalCount}-{page}-{pageCount}",//数据的相关信息，行，页面，总数等
    'summaryOptions' => ['class' => 'summarys'],
    'afterRow' => function (){},//每一行渲染后执行的方法
    'beforeRow' => function (){},//每一行渲染前执行的方法
    'caption' => '表格的标题',//表格的标题
    'captionOptions' => ['class'=>'capClass'],//表格的标题的html标签属性设置
    'emptyCell' => '<p>null</p>',//单元格数据为空时显示的内容
    'emptyText' => 'emptyText',//$dataProvider为空时显示的内容
    'columns' => []//列设置
]);

基本模板

<?= GridView::widget([
    'dataProvider' => $dataProvider,
    'columns' => [
        'id',
        'title',
        [
            'class' => 'yii\grid\ActionColumn',
            'header' => '操作',
            'template' => '{a-tag} {edit} {modal}',
            'buttons' => [
                'edit' => function($url, $model, $key){
                    return Html::a('编辑', '/backend/test/modal',['class' =>'btn btn-primary btn-sm'] );
                },
            ]
        ]
    ]
]);

表格样式

//table样式
    'tableOptions' => [
        'style' => 'text-align:center;',
        'class' => 'table table-striped table-bordered table-hover',
    ],

搜索栏

    'filterModel' => $searchModel,//过滤器
    'filterRowOptions'=>['class' => 'filters'],//搜索框的class

分页样式

    //分页样式
    'pager' => [
        'options'=>['class'=>'hidden'],//关闭分页
        'firstPageLabel' => "首页",
        'prevPageLabel' => '上一页',
        'nextPageLabel' => '下一页',
        'lastPageLabel' => '尾页',
    ],

设置table外的div的属性

    'options' => [
        'class' => 'grid-view',//固有的默认值
        'id' => 'w0',//自己指定id，默认是'w0'，
    ],

columns列操作

客户端id 顺序排列

['class' => 'yii\grid\SerialColumn']

显示某列

'title',

['label' => '标题', 'value' => 'title'],

td标签的属性配置

        [
            'attribute' => 'title',
            'contentOptions' => [
                'class' => '',
                'style' => 'text-align:center;">            ],
        ],

链接跳转

        [
            'attribute' => 'title',
            'format' => 'raw',
            'value' => function ($data) {
                return Html::a($data->title, ['test/index', 'id' => $data->id], ['title' => '审核']);
            }
        ],

下拉搜索框

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

显示日期

        [
            'label' => '更新日期',
            'format' => ['date', 'php:Y-m-d H:i:s'],
            'value' => 'updated_at',
        ],

        [
            'attribute' => 'created_at',
            'label' => '更新时间',
            'value' => function ($model) {
                return date('Y-m-d H:i:s', $model->created_at);
            }
        ],

类型显示和下拉过滤

        [
            'attribute' => 'sex',
            'value' => function ($model, $key, $index, $column) {
                return $model->sex == 1 ? '男' : '女';
            },
            'filter' => Html::activeDropDownList($searchModel, 'sex', ['1' => '男', '2' => '女'], ['prompt' => '全部'])
        ],

显示图片

        [
            'label' => '头像',
            'format' =>
                [
                    'image',
                    [
                        'width' => '25',
                        'height' => '25'
                    ]
                ],
            'value' => function ($model) {
                return "http://www.xhj.com/attachment/images/2022/10/21/image_1666317648_Io8YoDTY.jpg";
            }
        ],

html渲染

        [
            'attribute' => 'title',
            'value' => function ($model) {
                return Html::decode("title<strong><span style='color: red;'>123</span> </strong>");
                //return Html::encode("title<strong><span style='color: red;'>123</span> </strong>");
            },
            'format' => 'raw',
        ],

是否显示某列

        [
            'attribute' => 'title',
            'value' => $model->title,
            'visible' => intval(Yii::$app->request->get('type')) == 1
        ],

更多操作列

        [
            'class' => 'yii\grid\ActionColumn',
            'header' => '操作',
            'template' => '{a-tag} {edit} {modal}',
            'buttons' => [
                //连接
                'a-tag' => function($url, $model, $key){
                    return Html::a('连接', '/backend/test/modal',['class' =>'btn btn-primary btn-sm'] );
                },
                //按钮
                'edit' => function($url, $model, $key){
                    return Html::button('edit',[
                            'class' => 'btn btn-primary',
                            'onclick' => 'alert("Button 1 clicked");']
                    );
                },
                //弹框
                'modal' => function($url, $model, $key){
                    return Html::a('modal', '/backend/test/modal',[
                        'class' =>'btn btn-primary btn-sm',
                        'data-toggle' => 'modal',
                        'data-target' => '#ajaxModal', //弹窗js 后台renderAjax
                    ] );
                },
            ]
        ]

GridView使用实例

控制器

  $model=new Admin();
        $dataProvider = new ActiveDataProvider([
            'query' => Admin::find()->orderBy('id'),//此处添加where条件时：'query'=>User::find()->where(['username'=>'lizi']);
        ]);

        return $this->render('index', [
            'model' => $model,
            'dataProvider' => $dataProvider,
        ]);

视图

use yii\grid\GridView;
use yii\helpers\Html;

echo GridView::widget([
    'dataProvider' => $dataProvider,
    'pager' => [
        'linkContainerOptions' => ['class' => 'page-item'],
        'linkOptions' => ['class' => 'page-link'],
        'disabledListItemSubTagOptions' => [
            'tag' => 'a',
            'href' => 'javascript:;',
            'tabindex' => '-1',
            'class' => 'page-link'
        ],
        'firstPageLabel' => "首页",
        'prevPageLabel' => '上一页',
        'nextPageLabel' => '下一页',
        'lastPageLabel' => '尾页',
    ],
    'columns' => [
        'id',
        [
            'attribute' => 'username',
            'content' => function($dataProvider){
                return $dataProvider['username'];
            },
        ],
        'password',
        [
            'class' => 'yii\grid\ActionColumn',
            'header' => '操作',
            'template' => '{view}{update}{password}{delete}',
            'headerOptions' => ['width' => '128', 'class' => 'padding-left-5px',],
            'contentOptions' => ['class' => 'padding-left-5px'],
            'buttons' => [
                'password' => function ($url, $model, $key) {
                    return Html::a('<span class="glyphicon glyphicon-edit"></span>', $url, [
                        'title' => '修改密码',
                        'data-method' => 'post',
                        'data-pjax' => '0',
                    ]);
                },
            ],
        ],
    ],
]);