在客戶端上顯示/隱藏RichFaces組件onclick？ （沒有AJAX）

Question

我正在尋找一種顯示/隱藏任意RichFaces組件的方法。 在這種情況下，我有一個<rich:dataTable> ，其中包含幾行。 每行都需要有自己的獨立顯示/隱藏鏈接，這樣，當您單擊“顯示詳細信息”時，會發生兩件事：

1. “顯示詳細信息”鏈接重新呈現為“隱藏詳細信息”
2. 關聯的detailsColumns應該變為可見（從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>

Answer 1

到目前為止，您需要從JavaScript中的DOM中獲取生成的HTML元素，然后在block和none之間切換其CSS display屬性。 據我所知，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>