我们正在寻找一种在JSF 1.1中实现子表的方法。我们不能使用Rich Faces,因为目标服务器是WebSphere 6.1。我试过JSTL和Tomahawk无济于事。此外,我们的项目使用的是JSP而不是facelets。
答案 0 :(得分:2)
您可以在h:dataTable
内相互nest h:column
。但实际上您希望随后将另一个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';
}
}