Стилизация полос и выделение строк в tr: table с использованием CSS - PullRequest
Новая
       8

Стилизация полос и выделение строк в tr: table с использованием CSS

2 голосов
/ 11 июня 2010

У меня есть таблица tr: мне нужно стилизовать с помощью CSS. Все обычные стилевые функции таблицы работают, но объединение строк и выбор строк не подходят. Когда я просматриваю отрендеренный источник, я не вижу различий в строках для идентификатора или класса, к которому можно привязаться, и в официальной документации нет атрибутов для объявления класса стиля ни для одного из них. Возможно ли это, и если да, что мне нужно сделать, чтобы мой CSS захватил его? 

<tr:table id="myTable" value="#{tableValues}" rowBandingInterval="1">
    <tr:column>
        ##Stuff##
    </tr:column>
    <tr:column>
        ##Stuff##
    </tr:column>
    <tr:column>
        ##Stuff##
    </tr:column>
</tr:table>

Редактировать

Позвольте мне попытаться выяснить, что происходит.

Во-первых, используя приведенное выше объявление, jsf сообщает, что нужно сгенерировать таблицу, а атрибут rowBandingInterval указывает, что каждая строка должна иметь чередующиеся цвета. строки оригинала и пр.)

Как только страница отображается в стандартном html, Тринидад (и jsf) применяет свои собственные классы и идентификаторы к html. Моя обычная процедура - посмотреть на визуализированный html, найти класс, который он применяет, и добавить для него правила CSS. Однако в этом случае дополнительные стили не добавляются (ничто в отображаемом html не означает, что одна строка отличается от другой).

Итак, вопрос в том, как я могу сказать Тринидаду, чтобы я давал чередующиеся строки, и пользователь выбирал для строки разные классы / идентификаторы, чтобы я мог использовать CSS?

Редактировать 2

Просто чтобы никто не обращал внимания, никаких изменений в фактических td элементах также нет

Редактировать 3

После того, как все атрибуты были переключены вокруг, а затем разобраны весь код до чистых, я нашел атрибут полосатости строк. Классы Тринидад довольно запутанные, и если вы не переформатируете код и не удалите весь шум, вы его не увидите. Тринидад добавляет класс .af_column_cell-text-band к полосам с полосами, где обычные строки имеют только .af_column_cell-text. Так что половина проблемы решена. Мне все еще нужно знать селектор для выбранной пользователем строки, для которой я с радостью отдам все шарики любому, кто может дать мне ответ именно на это.

Ответы [ 5 ]

3 голосов
/ 18 июня 2010

Существует хороший и простой код jquery для подсветки строк, расположенный здесь .

jQuery выглядит следующим образом 

<script type="text/javascript">
  $(document).ready(function(){
    $(".stripeMe tr")
      .mouseover(function() { $(this).addClass("over");})
      .mouseout(function() { $(this).removeClass("over");
      });
    $(".stripeMe tr:even").addClass("alt");
  });
</script>

Затем немного CSS

tr.alt td { background: #ecf6fc; }
tr.over td { background: #bcd4ec; }

Кстати, я взял весь этот код со следующего сайта, где вы также можете просмотреть демонстрацию .

2 голосов
/ 13 июня 2010

Это не дает прямого ответа на ваш вопрос, но почему бы не использовать псевдокласс CSS3 для достижения этого эффекта?Например: 

tr:nth-child(2n)
{
background-color:red;
}
1 голос
/ 06 октября 2010

Я сделал что-то не так в процессе регистрации, так что это новый ответ вместо комментария.

Чтобы разобраться с темой о тринидаде, вам нужно сделать следующее:

В вашем файле web.xml необходимо установить для этого параметра значение true во время разработки: 

<context-param>
<param-name>org.apache.myfaces.trinidad.DISABLE_CONTENT_COMPRESSION</param-name>
<param-value>true</param-value></context-param>

Получите firebug для своего firefox. С помощью этого дополнения вы можете определить, какой тринидад-селектор используется в компоненте.

Нет селектора для выбранной пользователем строки. Я сделал это так: Дайте вашему объекту что-то вроде «свойства подсветки», которое вы изменяете, если оно выбрано. 

<tr:column sortProperty="nr" sortable="true" defaultSortOrder="ascending" headerText="Nr" inlineStyle="#{object.tablerowhighlight}text-align:right;"><tr:outputText value="#{object.nr}"/></tr:column>

Сделайте это для всех столбцов вашей таблицы, и все готово.

0 голосов
/ 05 октября 2010

поместите эти селекторы в ваш файл trinidadskin.css (в моем случае - smSkin.css):}

.AFTableCellDataBandedBackgroundColor: alias {background-color: #FFFFFF;}

Конфигурация trinidad-skins.xml 

<skin>
    <id>
        sm.desktop
    </id>
    <family>
        sm
    </family>
    <render-kit-id>
        org.apache.myfaces.trinidad.desktop
    </render-kit-id>
    <style-sheet-name>
        skins/sm/smSkin.css
    </style-sheet-name>
</skin>

0 голосов
/ 14 июня 2010

Я отошлю вас к документации Тринидада. http://myfaces.apache.org/trinidad/trinidad-api/tagdoc/tr_table.html В их примере они объявляют полосу как строку banding="row" Я предполагаю, что причина, по которой вы ничего не получаете, заключается в том, что вы не объявили, что это полоса строки или столбца.

...