Développez l'effondrement de lignes de la table dans la Datatable JSF

J'ai essayé d'obtenir cette fonctionnalité de développer/réduire de lignes de la table à l'aide de base de l'ACI et j'ai également de préserver le tri. Est-il un moyen dans le noyau de la JSF où je peux obtenir cette fonctionnalité?

InformationsquelleAutor Nrusingha | 2010-01-25
  1. 5

    Si vous insistez en utilisant l'implémentation de référence seulement, alors vous ne pouvez pas aller autour de l'aide d'un imbriquée h:dataTable et/ou h:panelGroup et un bonne coup de CSS pour obtenir alignés bien. Vous pouvez ensuite utiliser le JavaScript de manière intelligente pour afficher/masquer la ligne de détails.

    Voici une base de lancement pour exemple: 

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

    La toggleDetails() fonction peut ressembler (notez qu'il faut JSF client généré en compte l'IDENTIFIANT):

    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';
    }
}
    • Est-il possible de trier les colonnes
    • Il est vraiment possible. Vous pouvez trouver un exemple ici: balusc.blogspot.com/2006/06/...
    • Je suis nouveau sur le JSF, je me demandais si je peut mettre en œuvre le tri pour panneau de la grille ainsi que la table imbriquée à l'intérieur du panneau de la grille. L'algorithme de tri devrait bref tous les éléments dans panelGrid ainsi que dans la datatable.
    • Oui, vous le pouvez, faites un bouton ne le souhaité Collections#sort() chose sur la liste, et puis il suffit de l'afficher de nouveau.
    InformationsquelleAutor BalusC
  2. 0

    Je ne pense pas que vous pouvez le faire avec "de base", JSF, je suppose que vous voulez dire en utilisant uniquement l'implémentation de référence).

    Ce que je comprends, vous pouvez accomplir des sous-tables avec RichFaces sous-table

    Vous pouvez aussi faire quelque chose de similaire avec IceFaces - voir le composant vitrine (dans la Table -> Table Extensible). Cependant l'un de ces serait vous obliger l'ajout et la configuration d'un autre bibliothèque (RichFaces ou IceFaces) qui n'est probablement pas ce que vous voulez.

    InformationsquelleAutor
  3. -2

    Simple table extensible avec RichFaces

    On peut faire Simple table extensible avec RichFaces
    et le code est donné ci-dessous...

    <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>
    InformationsquelleAutor