显示/隐藏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>