展开Datatable JSF中表行的折叠

时间:2010-01-25 16:59:42

标签: jsf datatable expand collapse

我一直在尝试使用核心JSF实现表行扩展/折叠的功能,而且我必须保留排序。在核心JSF中有没有办法实现这个功能?

3 个答案:

答案 0 :(得分:5)

如果您坚持仅使用参考实现,那么您无法使用嵌套的h:dataTable和/或h:panelGroup以及良好的CSS镜头来获取它很好地对齐。然后,您可以使用JavaScript以智能方式显示/隐藏行详细信息。

这是一个基本的启动示例:

<h:dataTable value="#{bean.orders}" var="order">
    <h:column>
        <h:panelGrid columns="3">
            <h:graphicImage id="expand" value="expand.gif" onclick="toggleDetails(this);" />
            <h:outputText value="#{order.id}" />
            <h:outputText value="#{order.name}" />
        </h:panelGrid>
        <h:dataTable id="details" value="#{order.details}" var="detail" style="display: none;">
            <h:column><h:outputText value="#{detail.date}" /></h:column>
            <h:column><h:outputText value="#{detail.description}" /></h:column>
            <h:column><h:outputText value="#{detail.quantity}" /></h:column>
        </h:dataTable>
    </h:column>
</h:dataTable>

toggleDetails()函数可能看起来像(注意它需要考虑JSF生成的客户端ID):

function toggleDetails(image) {
    var detailsId = image.id.substring(0, image.id.lastIndexOf(':')) + ':details';
    var details = document.getElementById(detailsId);
    if (details.style.display == 'none') {
        details.style.display = 'block';
        image.src = 'collapse.gif';
    } else {
        details.style.display = 'none';
        image.src = 'expand.gif';
    }
}

答案 1 :(得分:0)

我认为你不能用“核心”JSF做到这一点(我假设你的意思是只使用参考实现)。

据我了解,您可以使用RichFaces subTable

完成子表

您也可以使用IceFaces做类似的事情 - 请参阅component showcase(它位于表格 - &gt;可扩展表格下)。但是,其中任何一个都需要您添加和设置另一个库(RichFaces或IceFaces),这可能不是您想要的。

答案 2 :(得分:-2)