Как задать разные цвета для набора строк в таблице gsp в зависимости от значений в полях? - PullRequest
Новая
       11

Как задать разные цвета для набора строк в таблице gsp в зависимости от значений в полях?

0 голосов
/ 09 июня 2011

У меня есть таблица gsp, и я заполняю значения в ее полях из коллекции, переданной из контроллера, используя каждый тег gsp для каждой строки. Теперь я хочу, чтобы строки, которые получают одинаковое значение для поля billId, отображались другим цветом. Как это сделать?

Ответы [ 3 ]

0 голосов
/ 09 июня 2011

Попробуйте выполнить следующее: 

<g:each in="${billings}" status="i" var="billing">
<set var="cssClass" value"${(billing.id % 2) == 0 ? 'odd' : 'even'}"/>
<g:each in="${billing.rows}" status="i" var="row">
<span class="${cssClass}">${row.id}</span>
</g:each>
</g:each>

для каждого нечетного и четного идентификатора биллинга, который вы определяете в другом стиле CSS.В вашем основном файле CSS вы должны определить класс четного и нечетного, например, с цветом фона.не знаю, как выглядит ваша структура вывода, поэтому создал пример кода.

0 голосов
/ 09 июня 2011

Попробуйте 

<g:each in="${billings}" status="i" var="billing">
  <set var="cssClass" value"${i < (billings.size()/2) ? 'class1' : 'class2'}"/>
  <g:each in="${billing.rows}" status="i" var="row">
    <span class="${cssClass}">${row.id}</span>
  </g:each>
</g:each>
0 голосов
/ 09 июня 2011

Хотя может показаться хорошей идеей показывать строки таблицы с одинаковым значением billId одним и тем же цветом, это может оказаться непрактичным. Например, если у вас есть 100 различных значений поля billId, вам нужно будет найти 100 различных цветов для использования в строках таблицы, и каждый из этих цветов должен хорошо работать с фоновым / текстовым цветом таблицы.

Даже если вам удастся найти достаточно цветов, ваш стол, вероятно, будет выглядеть как взрыв на фабрике по производству краски.

Более простым / лучшим решением может быть использование события onclick строки, чтобы выделить все строки красным цветом (например), которые имеют то же значение billId, что и выбранная строка. Для этого вам нужно будет использовать JavaScript.

Обновление

Комментарий ниже объясняет, что вы просто хотите чередовать цвета каждые 5 строк. Попробуйте это: 

<table>

<g:each in="${billings}" status="i" var="billing">

  <tr class="${i % 10 < 5 ? 'rows1' : 'rows2'}">
    <td>${billing.id}</td>

    <!-- Add other <tds> here -->
  </tr>
</g:each>

</table>

В CSS вам нужно создать классы с именами rows1 и rows2, которые определяют стили строк

...