在 JSF 1.1 中实现子表

Question

我们正在寻找一种在 JSF 1.1 中实现子表的方法。由于目标服务器是 WebSphere 6.1，我们不能使用 Rich Faces。我试过 JSTL 和 Tomahawk 无济于事。此外，我们的项目使用的是 JSP 而不是 facelets。

Answer 1

您可以在h:column 中相互nest h:dataTables。但是您实际上想随后在 new 行中嵌套另一个 h:dataTable。然后没有其他方法可以创建单个列并将h:panelGrid 放入其中以表示“主”行，并使用嵌套的h:dataTable 表示“详细”行。你还需要一个很好的 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';
    }
}