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

我能够修改gridview的行颜色，但我认为有一个默认属性来处理交替行的颜色，因为我在我的风格上指示的是红色的，但是当它显示为偶数行是红色的，而交替行是白色的。白色的行应该是绿色的。我认为这是yii为了某些可读性目的而作出的。在gridview行禁用交替的背景颜色yii2

奇怪的是，字体颜色是基于我提供的类。

<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'];  
       }, 
    . 
    . 
    . 
    . 
    . 
?>

如何覆盖默认背景颜色？

来源

2015-12-22 Gibs

试试这个：你不能覆盖默认的网格视图类。因此，使你的颜色属性重要，所以它将首先适用，或者你可以 .stateCritical：nth-child（偶数）{ 颜色：黑色; background-color：red; }

.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中考虑解决方案。你希望你的部分被全局定义（样式），但是一些你无法控制的内联样式是存在的。重要的是使这种情况更容易处理。

其他现实生活中的场景也包括一些写的不好的jQuery插件也使用内嵌样式...

我想你现在得到了主意，可以想出一些其他人。你什么时候决定使用！重要？

我建议你不要使用！重要的，除非你不能以任何其他方式做。只要有可能避免它，避免它。使用很多！重要的样式会使维护变得更加困难，因为您打破了样式表中的自然级联。

来源

2015-12-22 06:20:11

不错！我想接受这个答案，但如果你编辑你的答案并且添加关于'！important'的解释，那你会很友善。 :) – Gibs

我添加了解释。 –

非常好解释！谢谢！ – Gibs

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

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

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

来源

2015-12-23 05:56:39

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

回答

相关问题