Yii2：如何为 ActionColumn 中的按钮添加背景颜色答案

【问题标题】：Yii2: How to add background color to Buttons in the ActionColumnYii2：如何为 ActionColumn 中的按钮添加背景颜色
【发布时间】：2017-07-31 14:26:02
【问题描述】：

我正在 yii2 中做一个项目，我正在寻找一种方法来为 gridView 添加更多装饰。在操作列中，可以更改按钮及其调用的操作，但我尝试更改按钮和背景的颜色但没有成功。这里没有在线解决方案。我需要的是类似于所附图像的东西。谢谢

【问题讨论】：

标签： css gridview yii2

【解决方案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】：

将ActionColumn类替换为：

['class' => 'yii\grid\ActionColumn',
             'template' => '{view}&nbsp{update}&nbsp{delete}',   //{view}&nbsp;
             'buttons' => [
                 'view' => function($url, $model)   {
                        return Html::a('<button class="btn btn-success">View &nbsp;<i class="glyphicon glyphicon-eye-open"></i></button>',$url);
                    },
                 'update' => function($url, $model) {
                        return Html::a('<button class="btn btn-primary">Update &nbsp;<i class="glyphicon glyphicon-pencil"></i></button>',$url);
                    },
                 'delete' => function($url, $model) {
                      return Html::a('<button class="btn btn-danger">Delete &nbsp;<i class="glyphicon glyphicon-trash"></i></button>', $url, 
                             ['data-confirm' => 'Are you sure you want to delete this item?', 'data-method' =>'POST']
                          );
                    },
                'urlCreator' => function($action, $model, $key, $index) {
                      if ($action == 'view') {
                          return Html::a('Action', $url);
                      }
                      if ($action == 'update') {
                         return Html::a('Action', $url);
                      }
                      if ($action == 'delete') {
                          return Html::a('Action', $url);
                      }
                    } 
              ],            
            ],  // fin ActionColumn

【讨论】：

【解决方案3】：

操作栏代码：

[
        'class' => '\kartik\grid\ActionColumn',
        'contentOptions' => ['style' => ''],
        'headerOptions' => ['style' => 'text-align:center'],
        'template' => '{view}&nbsp;{update}&nbsp;{delete}', //{view}&nbsp;
        '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;
                      }
                }
],

【讨论】：

【解决方案4】：

对于绿色/蓝色/红色，您可以使用 'class' = 'btn-xxxx' 的引导约定按钮

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

或

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

或

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

【讨论】：