Question

我能够修改gridview的行颜色，但我认为有一个默认属性可以处理交替的行颜色，因为我在我的样式上指示的是红色，但是当它显示时，偶数行为红色，而备用行是白色的。白色的行应该是绿色的。我认为这是出于某些可读性目的而由yii制作的。

奇怪的是，根据我提供的课程，遵循字体颜色。

<style>
.stateCritical:nth-child(even) {
    color: black;
    background-color: red;
}

.stateCritical:nth-child(odd) {
    color: blue;
    background-color: green;
}

.stateOk {
    color: black;
    background-color: #C0FFBE;
}
</style>

<?= GridView::widget([
                'dataProvider' => $dataProvider,
                'rowOptions' => function($model) {
                    if ($model->last_hard_state == 2){
                        return ['class' => 'stateCritical'];
                    }
                    return ['class' => 'stateOk'];    
                },
    .
    .
    .
    .
    .
?>

如何覆盖默认背景颜色？

Answer 1

更简单的方法是覆盖gridView小部件的类。它获取条带，因为网格的默认类是table table-striped。

只需将此添加到您的小部件声明中;

GridView::widget([
    'dataProvider' => $dataProvider,
    'tableOptions' => ['class' => 'table table-bordered']
]);

Answer 2

试试这个：您无法覆盖该默认的网格视图类。因此，请将您的颜色属性设置为重要，以便首先应用，或者您可以 .stateCritical：nth-child（偶数）{ 颜色：黑色; 背景颜色：红色; }

.stateCritical:nth-child(odd) {
    color: blue;
    background-color: green !important;
}

.stateOk {
    color: black;
    background-color: #C0FFBE !important;
}
</style>

说明：

这是现实生活场景

想象一下这个场景

you have a global CSS file that sets visual aspects of your site globally
you (or others) use inline styles on elements themselves which is usually very bad practice

在这种情况下，您可以将全局CSS文件中的某些样式设置为重要，从而覆盖直接在元素上设置的内联样式。实际的现实世界的例子？

当您无法完全控制HTML时，通常会发生这种情况。例如，考虑Sharepoint中的解决方案。您希望自己的部分是全局定义的（样式化的），但您可以控制一些无法控制的内联样式。！important使这种情况更容易处理。

其他现实生活场景还包括一些写得不好的jQuery插件，它们也使用内联样式......

我想你现在已经有了这个想法，也可以提出其他一些想法。你什么时候决定使用！important？

我建议您不要使用！重要，除非您不能以任何其他方式执行此操作。只要有可能避免它，请避免它。使用大量的！重要样式会使维护变得更难，因为你打破了样式表中的自然级联。

在gridview行中禁用交替的背景颜色yii2

2 个答案: