3

我正在使用带有 JSF 2 的 Primefaces 3.5 并有一个数据表：

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

该表包含带有大文本描述的以下列，该文本描述当前被内联截断并显示在链接旁边以弹出带有全文的对话框：

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

现在的问题是使用展示中的标准 primefaces dataExporter 功能将具有全文值的表格导出为 PDF 或任何其他格式，因为它仅导出表格的确切内容：

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

所以请有人给我建议：

  1. 截断文本以在 dataTable 中显示的最佳方法是什么？

  2. 以及如何导出同一个表但已经具有全文值？

4

4 回答 4

5

纯 CSS 解决方案在这里： 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;
}

所以你只需要在页面上设置样式：

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

它在流体行为方面并不理想，但它非常简单并且有效！

于 2013-10-04T02:50:56.980 回答
2

我将鲍里斯的回答移植到 Primefaces 6.0 并制定了以下片段

.truncate {
  max-width: 120px;
}

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

CSS 选择器更复杂，因为我们希望避免对列的排序图标进行样式设置。对应的 Primefaces 示例

<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>
于 2017-03-07T16:02:21.103 回答
2

我正在使用 Primefaces 5.3 和我的内联解决方案<p:datatable>：

<p:column headerText="Category" style="text-overflow: ellipsis; white-space: nowrap;">
    <p:outputLabel value="#{p.category.name}" style="display: inline;"/>
</p:column>
于 2017-01-18T12:31:09.243 回答
1

尝试为您的字段设置样式description，这样您就可以对其内容进行换行：

<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;
}
于 2013-10-02T09:48:24.603 回答