Yii: Красим нечётные и чётные строки в CListView разными цветами с помощью css

Yii: Красим нечётные и чётные строки в CListView разными цветами с помощью css Как залить строку через строку в таблице разными цветами для удобства взгляду.Стиль зебры для строк в CListView.

В Yii это делается очень легко с помощью стилей css. Добавляем 2 стиля для классов в main.php:

.even {background:#fff9e0;}
.odd {background:#ffffff;}

Дальше в виде для itemView (у нас это _view_list.php) обращаемся к переменной $index, доступной в itemView в классе CListView, которую проверяем на чётность и устанавливаем соответствующий стиль классу.

<tr class="<?= ($index % 2) ? 'even' : 'odd' ?>">
	<td width="20px"><?php echo $index+1; ?></td>
	<!--<td><?//php echo CHtml::encode($data->id); ?></td>-->
	<td><?php echo CHtml::encode($data->name); ?></td>
	<td><?php echo CHtml::encode($data->surname); ?></td>
	<td><?php echo CHtml::encode($data->city_id); ?></td>
</tr>

или так:

<!-- inside your CListView's itemView partial -->
<div class="<?= ($index % 2) ? 'odd' : 'even' ?>">
...


almix
Разработчик Loco, автор статей по веб-разработке на Yii, CodeIgniter, MODx и прочих инструментах. Создатель Team Sense.

Вы можете почитать все статьи от almix'а.



Другие статьи по этой теме:

Комментарии (5)     Подпишитесь на RSS комментариев к этой статье.

5 комментариев

#319
ZVN говорит:
March 3, 2012 at 11:00 pm
Спасибо за подсказку! Обожаю Yii, все в нем продумано до мелочей.
#327
Константин говорит:
March 16, 2012 at 01:48 am
Табличные данные выводить с помощью CListView не много странновато, для этого же есть CGridView...
#329
almix говорит:
March 16, 2012 at 07:43 pm
@Константин, спасибо за замечание. Я использовал СListView, потому что этот виджет проще и не тянет шапку с фильтрами. а кроме того, не знаю как его стилями управлять программно... смотрю там уже чётные и нечётные строки "красятся", видимо можно переопределить их классы css.
#828
ivsdfsdfsd говорит:
April 4, 2013 at 11:55 pm
.zebra:odd { background-color:#ddd;} - не не слышал 
#934
alex говорит:
August 12, 2013 at 01:04 am

Кстати, тоже надо было мне - нашел такой вариант:

div:nth-child(odd)
{
background:#ff0000;
}