3

私はJSF 2でPrimefaces 3.5を使用しており、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.">

この表には、現在インラインで切り捨てられ、全文を含むダイアログをポップアップするリンクの横に表示されている大きなテキストの説明を含む次の列が含まれています。

    <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 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 に答える