Улучшение Yii2 GridView: методы настройки цветов строк

В Yii2 GridView — это мощный виджет, используемый для отображения табличных данных. Одной из распространенных настроек является изменение цветов строк для улучшения визуального представления и выделения конкретных данных. В этой статье блога мы рассмотрим различные методы достижения такой настройки в Yii2 GridView, а также приведем примеры кода.

Методы настройки цвета строк:

  1. Использование свойства rowOptions.
    Самый простой способ — использовать свойство rowOptions в конфигурации GridView. Это позволяет вам определять атрибуты HTML для каждой строки на основе условий. Вот пример:
<?= GridView::widget([
    'dataProvider' => $dataProvider,
    'columns' => [
        // columns configuration
    ],
    'rowOptions' => function ($model, $key, $index, $grid) {
        if ($model->status == 'active') {
            return ['class' => 'success']; // Sets the 'success' CSS class for the row
        } else {
            return ['class' => 'danger']; // Sets the 'danger' CSS class for the row
        }
    },
]); ?>
  1. Настройка классов CSS.
    Вы можете определить собственные классы CSS и применять их к отдельным строкам в зависимости от условий. Сначала определите классы CSS в вашем файле CSS:
.success {
    background-color: #dff0d8; /* Green background color */
}
.danger {
    background-color: #f2dede; /* Red background color */
}

Затем обновите свойство rowOptions в GridView:

<?= GridView::widget([
    'dataProvider' => $dataProvider,
    'columns' => [
        // columns configuration
    ],
    'rowOptions' => function ($model, $key, $index, $grid) {
        if ($model->status == 'active') {
            return ['class' => 'success']; // Applies the 'success' CSS class
        } else {
            return ['class' => 'danger']; // Applies the 'danger' CSS class
        }
    },
]); ?>
  1. Встроенное оформление.
    Если вы предпочитаете встроенное оформление, вы можете напрямую применить стили CSS к отдельным строкам с помощью свойства rowOptions:
<?= GridView::widget([
    'dataProvider' => $dataProvider,
    'columns' => [
        // columns configuration
    ],
    'rowOptions' => function ($model, $key, $index, $grid) {
        if ($model->status == 'active') {
            return ['style' => 'background-color: #dff0d8']; // Green background color
        } else {
            return ['style' => 'background-color: #f2dede']; // Red background color
        }
    },
]); ?>
  1. Расширение условного форматирования.
    Yii2 предоставляет расширения, упрощающие условное форматирование в GridView. Одним из популярных расширений является расширение «kartik-v/yii2-widget-conditionalcolumn». Инструкции по установке и использованию можно найти в документации расширения.