Truncating big text value in p:dataTable and exporting the table with the full text

问题

I am using Primefaces 3.5 with JSF 2 and have a 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.">

The table contains the following column with a big text description which is currently truncated inline and displayed next to a link to popup a dialog with the full 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>

The problem now is to export the table with the full text value to PDF or any other format using the standard primefaces dataExporter functionality from the showcase as it exports only the exact content of the table:

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

So please could anybody advise me:

What is the best approach to truncate the text to display it in dataTable?
And how to export the same table but already with the full text value?

回答1:

The pure CSS solution is here: 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 you need just to set the style on the page:

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

It is not ideal in terms of fluid behavior but it is pretty simple and it works!

回答2:

Try styling your description field, that way you can line-break its content:

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

回答3:

I'm using Primefaces 5.3 and the solution for my datatable is:

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

I hope this helps...

Good Luck!

回答4:

I ported Boris' answer to Primefaces 6.0 and worked out the following snippet

.truncate {
  max-width: 120px;
}

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

The CSS selector is more complex, because we want to avoid to style the sort-icon of the column. The corresponding Primefaces example

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

来源：https://stackoverflow.com/questions/19134075/truncating-big-text-value-in-pdatatable-and-exporting-the-table-with-the-full-t

标签

css

jsf-2

primefaces