显示/隐藏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元素，然后在display和block之间切换其CSS 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>