我一直在尝试使用核心 JSF 实现表行展开/折叠的功能,而且我必须保留排序。核心 JSF 中有没有一种方法可以实现此功能?
问问题
14554 次
3 回答
5
如果你坚持只使用参考实现,那么你就不能到处使用嵌套h:dataTable
和/或CSSh:panelGroup
的好镜头来让它很好地对齐。然后,您可以使用 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';
}
}
于 2010-01-25T17:56:42.143 回答
0
我认为您不能使用“核心”JSF 来做到这一点(我假设您的意思是仅使用参考实现)。
据我了解,您可以使用 RichFaces subTable完成子表
你也可以用 IceFaces 做类似的事情——查看组件展示(它在 Table -> Expandable Table 下)。但是,其中任何一个都需要您添加和设置另一个库(RichFaces 或 IceFaces),这可能不是您想要的。
于 2010-01-25T17:16:05.190 回答
-2
带有 RichFaces 的简单可扩展表格
我们可以用 RichFaces 做简单的可扩展表格,代码如下...
<h:form>
<rich:dataTable value="#{wonderBean.wonders}" var="wonder">
<rich:column colspan="3">
<f:facet name="header">Wonder</f:facet>
<h:outputText value="#{wonder.name}" />
<a4j:commandLink id="link" value="#{!wonderBean.show?'[+]':'[-]'}"
reRender="link">
<a4j:actionparam name="val" value="#{!wonderBean.show}"
assignTo="#{wonderBean.show}" />
</a4j:commandLink>
</rich:column>
<rich:columnGroup>
<rich:column>
<a4j:outputPanel ajaxRendered="true">
<rich:dataTable value="#{wonder.details}" var="detail"
rendered="#{wonderBean.show}" style="border: 0px">
<rich:column>
<f:facet name="header">Location</f:facet>
<h:outputText value="#{detail.location}" />
</rich:column>
<rich:column>
<f:facet name="header">Image</f:facet>
<h:graphicImage value="#{detail.imageUrl}" />
</rich:column>
</rich:dataTable>
</a4j:outputPanel>
</rich:column>
</rich:columnGroup>
</rich:dataTable>
</h:form>
于 2010-07-24T06:22:25.770 回答