Mit dem abschneiden von großen text-Wert in p:dataTable und exportieren Sie die Tabelle mit dem vollständigen text

Ich bin mit Primefaces 3.5 mit JSF 2 und habe eine dataTable:

<p:dataTable id="dataTable" var="refType"
        value="#{rtmUiController.listAllRefTypes()}" paginator="true"
        rows="10" filteredValue="#{rtmUiController.filteredRefTypes}"
        paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
        rowsPerPageTemplate="10,25,50,100" resizableColumns="true"
        emptyMessage="No reference type found.">

Die Tabelle enthält die folgenden Spalten mit einem großen text-Beschreibung, die sich derzeit abgeschnitten, inline-und eingeblendet wird ein link zum popup-dialog mit dem vollständigen text:

    <p:column filterBy="#{refType.description}"
            filterMatchMode="contains">
            <f:facet name="header">
                <h:outputText value="Description" />
            </f:facet>
            <h:outputText value="#{refType.description.substring(30)}" />
            <p:commandLink id="descriptionLink" value="... (full text)"
                oncomplete="descriptionDialog.show()"
                update=":tabView:form1:descriptionPanel"
                rendered="#{not empty refType.description}">
                <f:setPropertyActionListener value="#{refType.description}"
                    target="#{flash.description}" />
            </p:commandLink>
    </p:column>

    <p:dialog widgetVar="descriptionDialog" resizable="false"
        header="Reference Type Description">
        <p:panelGrid id="descriptionPanel" columns="1">
            <h:outputText id="description" value="#{flash.description}" />
        </p:panelGrid>
    </p:dialog>

Das problem ist nun, exportieren Sie die Tabelle mit dem vollständigen text Wert zu PDF oder einem anderen format mit der standard-primefaces dataExporter Funktionalität aus der Vitrine, wie es exportiert nur den genauen Inhalt der Tabelle:

    <h:panelGrid>
        <p:panel header="Export Table Data">
            <h:commandLink>
                <p:graphicImage id="pdfImage" value="/resources/images/pdf.png" />
                <p:dataExporter type="pdf" target="dataTable" fileName="refTypes"
                    showEffect="fade" hideEffect="fade" />
                <p:tooltip for="pdfImage" value="Export table data to PDF file"
                    showEffect="fade" hideEffect="fade" />
            </h:commandLink>
        </p:panel>
    </h:panelGrid>

Also bitte kann jemand mir raten:

Was ist der beste Ansatz, kürzen Sie den text, um ihn in dataTable?
Ist und wie der export der gleichen Tabelle, aber bereits mit dem vollständigen text Wert?

Hallo @BalusC, vielleicht könnten Sie mir raten, sowas bitte?

InformationsquelleAutor Boris | 2013-10-02

Die Reine CSS-Lösung ist hier: http://ovaraksin.blogspot.com.ar/2012/12/elegant-truncated-text-with-ellipses-in.html

.truncate {
    max-width: 160px;
    width: 160 px\9;
}

.truncate > div {
    width: 160 px\9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
    display: block;
    position: absolute;
}

So müssen Sie nur den Stil auf der Seite:

<p:column headerText="Description" sortBy="#{user.description}" styleClass="truncate">
    <h:outputText id="desc" value="#{user.description}"/>
    <pe:tooltip for="desc" value="#{user.description}"/>
</p:column>

Es ist nicht ideal, in Bezug auf Flüssigkeit Verhalten, aber es ist ziemlich einfach und es funktioniert!

Dies erzeugt den doppelten Wert in der exportierten Datei Feld für mich.

InformationsquelleAutor Boris

1

Versuchen Sie styling Ihr description Feld, so können Sie line-break seinen Inhalt:
```
<h:outputText id="description" value="#{flash.description}" 
    styleClass="text-word-wrap" />
```
```
.text-word-wrap {
    white-space: normal;
    word-wrap: break-word;
    word-break: break-all;
}
```
- Danke, aber die Anforderungen sind zu haben abgeschnittener text in der Tabelle angezeigt, um der Lage sein, popup-den vollständigen text, und exportieren Sie den vollständigen text zu.
- Für die ersten zwei können Sie einen view-Objekt und schneiden Sie den text mit Hilfe von Java, dann die Anzeige der Eigenschaft mit dem vollständigen text, wenn der Benutzer klickt auf die Zelle. Für die Letzte, nicht sicher, können Sie es mit primefaces-Exporteur. PF-Exporteur exportiert, was bereits sichtbar in der Tabelle, soweit ich weiß. Sollten Sie die Erstellung Ihrer eigenen exporter für, die.
InformationsquelleAutor Xtreme Biker

Ich bin mit Primefaces 5.3 und die Lösung für mein datatable:

<p:column headerText="Category" style="text-overflow: ellipsis; white-space: nowrap;">
    <p:outputLabel value="#{p.category.name}" style="display: inline;"/>
</p:column>

Ich hoffe das hilft...

Glück!

InformationsquelleAutor ℛɑƒæĿ

Ich portiert Boris' Antwort auf Primefaces 6.0 und arbeitete die folgenden snippet

.truncate {
  max-width: 120px;
}

.truncate > span:nth-child(2):not(.ui-icon) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

Den CSS-Selektor ist komplexer, weil wir vermeiden wollen, um Stil zu Sortieren-Symbol der Spalte an. Die entsprechenden Primefaces Beispiel

<p:column headerText="Description" sortBy="#{user.description}" styleClass="truncate">
  <h:outputText id="desc" value="#{user.description}"/>
  <p:tooltip for="desc" value="#{user.description}"/>
</p:column>

InformationsquelleAutor DanielK

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.