yii 列表默认按钮修改图标为文字

最新推荐文章于 2024-06-13 09:39:06 发布

tang05709

最新推荐文章于 2024-06-13 09:39:06 发布

阅读量293

点赞数

分类专栏： php

本文链接：https://blog.csdn.net/tang05709/article/details/101437734

版权

php 专栏收录该内容

209 篇文章 1 订阅

订阅专栏

首先自定义类，并继承默认的ActionColumn

namespace common\components\GridActionColumn;

use Yii;
use yii\helpers\Html;
use yii\helpers\Url;
use yii\grid\ActionColumn;

class GridActionColumn extends ActionColumn {

    public $isShowView = false;    
    public $isShowDelete = false;

    public function init()
    {
        parent::init();
        $this->template = '<div class="table-action-btns">{soft-delete} ' . $this->template . ' </div>';
        $this->initDefaultButtons();
    }

    /**
     * Initializes the default button rendering callbacks.
     */
    protected function initDefaultButtons()
    {
        if($this->isShowView) {
            $this->initDefaultButton('view', 'show');
        }
        $this->initDefaultButton('update', 'edit');
        $this->initDefaultButton('soft-delete', 'soft_delete');
        if($this->isShowDelete) {
            $this->initDefaultButton('delete', 'delete', [
                'data-confirm' => Yii::t('backend', 'disable_or_enable'),
                'data-method' => 'post',
            ]);
        }
    }

    /**
     * Initializes the default button rendering callback for single button.
     * @param string $name Button name as it's written in template
     * @param string $iconName The part of Bootstrap glyphicon class that makes it unique
     * @param array $additionalOptions Array of additional options
     * @since 2.0.11
     */
    protected function initDefaultButton($name, $langName, $additionalOptions = [])
    {
        if (!isset($this->buttons[$name]) && strpos($this->template, '{' . $name . '}') !== false) {
            $this->buttons[$name] = function ($url, $model, $key) use ($name, $langName, $additionalOptions) {
                switch ($name) {
                    case 'view':
                        $title = Yii::t('yii', 'View');
                        break;
                    case 'update':
                        $title = Yii::t('yii', 'Update');
                        break;
                    case 'soft-delete':
                        $title = Yii::t('yii', 'Delete');
                        if(isset($model->status)) {
                            if($model->status == 8) {
                                $title = Yii::t('backend', 'endisable');
                            } else {
                                $title = Yii::t('backend', 'disable');
                            }
                        }
                        break;
                    case 'delete':
                        $title = Yii::t('yii', 'Delete');
                        break;
                    default:
                        $title = ucfirst($name);
                }
                $options = array_merge([
                    'title' => $title,
                    'aria-label' => $title,
                    'data-pjax' => '0',
                ], $additionalOptions, $this->buttonOptions);
                if(isset($model->status) && $name == 'soft-delete') {
                    if($model->status == 8) {
                        $langName = 'endisable';
                    } else {
                        $langName = 'disable';
                    }
                }
                $lang = Yii::t('backend', $langName);
                return Html::a($lang, $url, $options);
            };
        }
    }
}

使用就是将默认的类修改为自己的类，因为view页面很少用到，所以这里默认屏蔽了view操作，如果需要显示，这在使用中加上isShowView

[
                'class' => 'common\components\GridActionColumn\GridActionColumn',
                'isShowView' => true,
                'template' => '{list} {update} {delete}',
                'buttons' => ['list' => function ($url, $model, $key) {
                    $lang = Yii::t('backend', 'ad');
                    $url = Url::to(['ad/ad', 'banner_id' => $model->id]);
                    return Html::a($lang, $url, ['title' => $lang, 'aria-label' => $lang]);
                 }],
            ],

由于列表自动设置宽度，且修改成文字后操作按钮所占宽度在做了自定义按钮后会很宽，所以这里加上了一个包裹层，便于设置操作按钮宽度

.content .grid-view table .table-action-btns {
    max-width: 250px;
    white-space: normal;
}
.content .grid-view table .table-action-btns a {
    display: inline-block;
    margin-bottom: 3px;
}

默认样式中设置了最后一列的white-space,这样不管多少个按钮，始终在一行，所以需要设置按钮换行。