Erweitern Zusammenbruch der Tabellenzeilen in Datatable JSF
Frage
Ich habe versucht, diese Funktionalität zu erreichen von Aufklappen / Zuklappen von Tabellenzeilen Kern JSF verwenden und ich muß auch die Sortierung bewahren. Gibt es eine Möglichkeit in Kern JSF, wo ich diese Funktionalität erreichen kann?
Lösung
Wenn Sie darauf bestehen, nur Referenzimplementierung in verwenden, können Sie nicht eine verschachtelte h:dataTable
umgehen und / oder h:panelGroup
und eine gut Schuss von CSS, um es schön ausgerichtet zu bekommen. Anschließend können Sie JavaScript, um die intelligente Art und Weise verwenden, um Anzeigen / Verbergen der Reihe Details.
Hier ist ein Grund Kickoff Beispiel:
<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>
Die toggleDetails()
Funktion kann wie folgt aussehen (beachten Sie, dass es JSF generierte Client-ID berücksichtigt):
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';
}
}
Andere Tipps
Ich glaube nicht, Sie können dies tun, mit ‚Kern‘ JSF (womit ich nehme an, Sie bedeuten nur mit der Referenz-Implementierung).
Wie ich es verstehe, können Sie untergeordnete Tabellen mit Richfaces erreichen untergeordnete Tabelle
Sie können auch eine ähnliche Sache mit IceFaces tun - siehe Komponente Vitrine (es ist unter Tabelle -> erweiterbare Tabellen). Doch entweder von diesen würde verlangen, dass Sie das Hinzufügen und andere Bibliothek (Richfaces oder IceFaces) einrichten, das ist wahrscheinlich nicht das, was Sie wollen.
Einfach erweiterbar Tabelle mit Richfaces
Wir können mit Richfaces Einfach erweiterbar Tisch tun und der Code ist unten angegeben ...
<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>