展开Datatable JSF中表格行的折叠

本文介绍了展开Datatable JSF中表格行的折叠的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我一直在尝试通过使用核心JSF来实现表行展开/折叠的功能，同时我也要保留排序。核心JSF有没有办法可以实现这个功能？

I have been trying to achieve this functionality of expand/collapse of table rows using core JSF and also I have to preserve the sorting. Is there a way in core JSF where I can achieve this functionality?

推荐答案

如果你坚持使用参考实现，那么你不能使用嵌套的 h：dataTable 和/或 h：panelGroup 和 / em>发布CSS以使其很好地对齐。然后，您可以使用JavaScript来显示/隐藏行详细信息。

If you insist in using reference implementation only, then you can't go around using a nested h:dataTable and/or h:panelGroup and a good shot of CSS to get it aligned nicely. You can then use JavaScript the smart way to show/hide row details.

这是一个基本的开始示例：

Here's a basic kickoff example:

<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）：

The toggleDetails() function can look like (note that it takes JSF generated client ID into account):

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'; } }