Yii2 GridView 行颜色

在Yii2的GridView中，我们可以通过设置rowOptions来为每一行设置样式(e.g.颜色)。本文将介绍如何在Yii2 GridView中设置行颜色。

获取数据

为了演示如何在Yii2的GridView中设置行颜色，我们需要首先获取一些数据。这里我们以学生表（student）为例，假设该表有如下字段：

• id (integer): 学生ID
• name (string): 学生姓名
• age (integer): 学生年龄

我们可以通过ActiveRecord来获取该表的数据。假设我们已经在表对应的模型类(Student)中定义好了查询方法getStudents()，我们可以在控制器中这样获取数据：

public function actionIndex()
{
    $dataProvider = new ActiveDataProvider([
        'query' => Student::getStudents(),
        'pagination' => [
            'pageSize' => 10,
        ],
    ]);
    
    return $this->render('index', [
        'dataProvider' => $dataProvider,
    ]);
}

在上述代码中，我们使用了ActiveDataProvider来获取数据并传递给视图。我们可以通过pageSize来设置每页显示的记录数，默认为20条。我们将每页显示10条记录。

设置行颜色

在Yii2的GridView中，我们可以通过设置rowOptions来为每一行设置样式。我们可以使用以下方法设置行颜色：

<?= GridView::widget([
    'dataProvider' => $dataProvider,
    'columns' => [
        'id',
        'name',
        'age',
    ],
    'rowOptions' => function ($model, $key, $index, $grid) {
        if ($model->age > 18) {
            return ['style' => 'background-color: #dff0d8;'];
        } else {
            return ['style' => 'background-color: #f2dede;'];
        }
    },
]); ?>

在上述代码中，我们设置了rowOptions属性为一个匿名函数。该函数接受4个参数：

• $model：当前行的模型对象。
• $key：当前行的主键值。
• $index：当前行在数据提供器中的序号（从0开始）。
• $grid：当前GridView对象。

该匿名函数返回一个数组，用于设置当前行的属性。我们可以使用style属性来设置当前行的样式，这里我们根据学生的年龄来为每一行设置不同的背景颜色。

总结

在Yii2的GridView中，我们可以通过设置rowOptions来为每一行设置样式。我们可以使用匿名函数来动态设置当前行的属性，从而实现各种效果，比如本文中实现的行颜色。请读者自行尝试更多的设置方式。