Показать/скрыть компонент RichFaces при щелчке на стороне клиента? (без АЯКС)

Я ищу способ показать/скрыть произвольный компонент RichFaces. В этом случае у меня есть <rich:dataTable>, который содержит несколько строк. Каждая строка должна иметь свою собственную независимую ссылку «Показать/скрыть», чтобы при нажатии кнопки «Показать подробности» происходили две вещи:

  1. Ссылка «Показать подробности» перерисована как «Скрыть подробности».
  2. Связанные столбцы деталей должны стать видимыми (начиная с состояния rendered="true", но style="display: none;").

Я не хочу писать свои собственные функции JavaScript, если в этом нет абсолютной необходимости. Я также не хочу, чтобы bean-компонент на стороне сервера отслеживал, какие detailColumns отображаются, а затем повторно отображал все через AJAX: это должно быть чисто поведением на стороне клиента. Я не уверен, как это сделать.

Следующий псевдокод (надеюсь) иллюстрирует мою цель:

<rich:column>
    <a href="#" onclick="#{thisRow.detailsColumn}.show();" rendered="">Show details</a>
    <a href="#" onclick="#{thisRow.detailsColumn}.hide();" rendered="">Hide details</a>
</rich:column>

<rich:column>
    <h:outputText value="#{thisRow.someData}" />
</rich:column>

<rich:column id="detailsColumn" colspan="2" breakBefore="true">
    <h:outputText value="#{thisRow.someMoreData}" />
</rich:column>


java javascript jsf richfaces seam
person Dolph    schedule 30.04.2010    source источник

Ответы (1)


arrow_upward
5
arrow_downward

К слову, вам нужно получить сгенерированный HTML-элемент из DOM в JavaScript, а затем переключить его свойство CSS display между block и none. Насколько я знаю, RichFaces не предоставляет готовых скриптов/средств для этого, но в принципе это не так сложно:

function toggleDetails(link, show) {
    var elementId = determineItSomehowBasedOnGenerated(link.id);
    document.getElementById(elementId).style.display = (show ? 'block' : 'none');
}

с участием

<h:outputLink onclick="toggleDetails(this, true); return false;">show</h:outputLink>
<h:outputLink onclick="toggleDetails(this, false); return false;">hide</h:outputLink>
person BalusC    schedule 30.04.2010
comment
+1. Вы также можете использовать встроенный Richfaces jQuery rich:jQuery, чтобы сделать то же самое очень просто. - person Shervin Asgari; 03.05.2010
comment
Вы проверили сгенерированный исходный код HTML? Разве вы не видите закономерности в сгенерированных идентификаторах? Используйте это! :) Это не ракетостроение. Подстрока, разделение, добавление и т. д. в символе-разделителе :. Я просто не мог подробно ответить на этот вопрос, потому что в вашем вопросе не хватает информации, и я не использую RichFaces, поэтому я не мог сказать, сгенерированный HTML, с самого начала. Я думал, что это было достаточно просто для вас. Тем не менее, вы можете найти другой пример в этом ответе :) - person BalusC; 01.06.2010
comment
В будущем просто комментируйте, чтобы попросить разъяснений чуть раньше, а не через месяц с бешеным запахом. Я не уклоняюсь от обновления ответа с расширенным объяснением/примером, как этого добиться :) - person BalusC; 01.06.2010