问题描述
我一直在尝试使用核心 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
和一个 good 的 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';
}
}
这篇关于展开 Datatable JSF 中表格行的折叠的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!