在客户端上显示/隐藏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>