Yii2:如何在ActionColumn中为按钮添加背景颜色

时间:2017-07-31 14:26:03

标签: css3 gridview yii2

我正在yii2中开展一个项目,我正在寻找一种方法来为gridView添加更多装饰。在操作列中,可以更改按钮和他们调用的操作,但我尝试更改按钮的颜色和背景,但没有成功。这里没有可用的解决方案。我需要的是类似附图的东西。谢谢。Action Column Image

4 个答案:

答案 0 :(得分:1)

行动守则栏:

[
        'class' => '\kartik\grid\ActionColumn',
        'contentOptions' => ['style' => ''],
        'headerOptions' => ['style' => 'text-align:center'],
        'template' => '{view} {update} {delete}', //{view} 
        'buttons' => [
                    'view' => function ($url, $model)
                    {
                        return Html::a('<button class="btn btn-success"><i class="fa fa-eye"></i></button>',$url);
                    },
                    'update' => function ($url, $model)
                    {
                        return Html::a('<button class="btn btn-primary"><i class="fa fa-pencil"></i></button>',$url);
                    },
                    'delete' => function ($url, $model)
                    {
                    return Html::a('<button class="btn btn-danger"><i class="fa fa-trash"></i></button>',$url);
                    }
                ],
                'urlCreator' => function ($action, $model, $key, $index) {
                        // change urls as your need
                      if ($action == 'view') {
                              $url =Yii::$app->request->baseUrl.'/users/view?id='.$model->id;
                              return $url;
                      }
                      if ($action == 'update') {
                              $url = Yii::$app->request->baseUrl.'/users/update?id='.$model->id;
                              return $url;
                      }
                      if ($action == 'delete') {
                              $url = Yii::$app->request->baseUrl.'/users/delete?id='.$model->id;
                              return $url;
                      }
                }
],

答案 1 :(得分:1)

创建自定义按钮:

<?= GridView::widget([
                        'dataProvider' => $dataProvider,
                        'columns' => [
                            ['class' => 'yii\grid\SerialColumn'],


                            [
                                'format'=>'raw',
                                'value' => function($data){
                                return
                                    Html::a('<span class="glyphicon glyphicon-eye-open"></span> View', ['view','id'=>$data->id], ['title' => 'view','class'=>'btn btn-success']).' '.
                                    Html::a('<span class="glyphicon glyphicon-pencil"></span> Update', ['update','id'=>$data->id], ['title' => 'edit','class'=>'btn btn-info']).' '.
                                    Html::a('<span class="glyphicon glyphicon-trash"></span> Delete', ['delete', 'id' => $data->id], [
                                        'class' => 'btn btn-danger',
                                        'data' => [
                                            'confirm' => 'Are you sure you want to delete this item?',
                                            'method' => 'post',
                                        ],
                                    ]);
                                }
                            ],

                        ],
                    ]); ?

>

答案 2 :(得分:1)

enter image description here将ActionColumn类替换为:

root@mysql-190877524-gm3j4:/# mysql_upgrade -uroot -p***
Checking if update is needed.
Checking server version.
Running queries to upgrade MySQL server.
Checking system database.
mysql.columns_priv                                 OK
mysql.db                                           OK
mysql.engine_cost                                  OK
mysql.event                                        OK
mysql.func                                         OK
mysql.general_log                                  OK
mysql.user                                         OK
Upgrading the sys schema.
Checking databases.
[...]
Upgrade process completed successfully.
Checking if update is needed.

答案 3 :(得分:0)

对于绿色/蓝色/红色您可以使用'class' = 'btn-xxxx'

使用引导程序约会
 ['class' =>'btn btn-success' ]

 ['class' =>'btn btn-info' ]

 ['class' =>'btn btn-danger' ]