При повторном рендеринге JSF dataTable теряется стиль CSS

У меня есть dataTable, который работает по желанию, когда он отображается через обычный (не ajax) цикл запроса/ответа.

У меня есть определенный стиль, который должен применить цвет фона и отступы к самой первой строке в таблице:

.myTable tr:first-child td {
  padding-top: 25px;
  background-color: yellow;
}

Как я упоминал выше, отступы и цвет фона отображаются идеально при загрузке через типичный запрос/ответ. Однако есть несколько действий, которые могут привести к повторному отображению этой таблицы через AJAX. Когда это происходит, таблица корректно перезагружается (это данные), но указанный выше стиль не применяется повторно.

Поскольку нет возможности специально назначить первой строке класс CSS при использовании компонента dataTable. Итак, я использовал приведенный выше селектор CSS, чтобы получить первую строку. Кто-нибудь когда-нибудь имел дело с такой проблемой раньше? Является ли мой единственный вариант попытаться использовать jQuery при завершении ВСЕХ... что может быть во многих разных местах... действий, которые могут вызвать повторную визуализацию таблицы?

Моя проблема в том, что я пытаюсь избежать использования компонента таблицы richfaces ради скорости, и мне нужно, чтобы таблица прокручивалась. Итак, я использую CSS-решение для конкретного браузера, чтобы просмотреть тело таблицы и сохранить статические заголовки. Основная проблема заключается в том, что мне нужно, чтобы первая строка таблицы имела верхнее значение заполнения, которое опускает ее ниже фиксированного положения заголовка таблицы.


rerender css jsf
person Steve    schedule 31.01.2011    source источник
comment
Это больше похоже на проблему CSS, специфичную для браузера. Какой браузер вы использовали? Попробуйте протестировать как минимум браузеры на базе MSIE, Gecko (Firefox) и Webkit (Chrome, Safari).   -  person BalusC    schedule 01.02.2011
comment
Разрабатываемое приложение ориентировано на IE7.   -  person Steve    schedule 01.02.2011

Ответы (1)


arrow_upward
2
arrow_downward

Поскольку вы перерисовываете только dataTable, применяется стиль таблицы по умолчанию.

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

Попробуйте что-то вроде приведенного ниже кода и перерисуйте outputPanel вместо dataTable:

<a4j:outputPanel>
    <h:dataTable>
            //Data
    </h:dataTable>
    <style>
       .myTable tr:first-child td {
          padding-top: 25px;
          background-color: yellow;
        }
    </style>
</a4j:outputPanel>
person niksvp    schedule 01.02.2011
comment
Я сталкивался с подобной проблемой с JavaScript раньше, поэтому я не уверен, почему я не подумал перерисовать стиль. Однако, когда я использовал хаки, которые я применил, чтобы попытаться заставить это работать, я попробовал это еще раз, прежде чем вводить повторный рендеринг стиля, и теперь он работает. Итак, у меня, очевидно, было что-то тонкое неправильное, и я не смог его обнаружить, но, вернув код в исходную форму, я это исправил. Итак, спасибо за предложение. Если я снова столкнусь с этой проблемой, я буду помнить об этом предложении. - person Steve; 01.02.2011