在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

回答

相關問題