Показать / скрыть компонент RichFaces на стороне клиента? (без AJAX) - PullRequest
Новая
       8

Показать / скрыть компонент RichFaces на стороне клиента? (без AJAX)

2 голосов
/ 01 мая 2010

Я ищу способ показать / скрыть произвольный компонент 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>

1 Ответ

5 голосов
/ 01 мая 2010

Кстати, вам нужно получить сгенерированный 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>
...