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

我正在尋找一種顯示/隱藏任意RichFaces組件的方法。在這種情況下，我有一個<rich:dataTable>包含幾行。每一行都需要有它自己的，獨立的顯示/隱藏鏈接，這樣，當你點擊「顯示詳細信息」，兩件事情發生：顯示/隱藏RichFaces組件onclick客戶端？（沒有AJAX）

「顯示詳細信息」鏈接進行重新渲染爲「隱藏詳細信息」
相關的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>

來源

2010-04-30 Dolph

爲了這一點，你需要抓住從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>

來源

2010-04-30 21:01:22 BalusC

+1。你也可以使用內置的Richfaces jQuery'rich：jQuery'來做相似的事情。 – 2010-05-03 14:30:58

你檢查了生成的HTML源代碼嗎？你沒有看到生成的ID中的模式？利用它！ :)這不是火箭科學。子字符串，拆分，追加等等在分隔符字符'：'上。我根本無法詳細回答這個問題，因爲在你的問題中缺乏信息，而且我也沒有做RichFaces，所以我無法從頭頂部告訴它生成的HTML。我認爲這對你來說足夠簡單。儘管如此，你可以在[這個答案]中找到另一個例子（http://stackoverflow.com/questions/2133985/expand-collapse-of-table-rows-in-datatable-jsf/2134378#2134378）:) – BalusC 2010-06-01 19:08:58

在未來，只是評論要求澄清一點，而不是一個月後有瘋狂的氣味。我不迴避更新的答案與擴展解釋/例如如何實現:) – BalusC 2010-06-01 19:14:33

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

回答

相關問題

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