5

いくつかのテストデータを含むデータテーブルを作成しました。私の問題は、いくつかの値が私の列の1つに対して大きすぎるため、奇妙なレイアウトにつながることです。

ここに画像の説明を入力してください

(注文列の後に、他の2つの列が表示されます)

私はすでにいくつかのことを試しました:

  • <p:column headerText="Orders" width="50">変更なし
  • <p:column headerText="Orders" style="max-width: 30px;">列を小さくしますが、値は30px後にカットされます
  • <br/>ブレークラインを強制するためにいくつかの数字の後に追加しますが、変更はありません

注文値は1つの大きな文字列です。私の目標は、orders列を、文字列値が分割される複数行の列に変更することです。

私のデータテーブルコード:

<h:body>
    <h:head>
    </h:head>
    <h:form id="form">           
        <p:dataTable id="customerTable" var="customer" value="#{customerDataTable.allCustomer}"
         rows="25" paginator="true" emptyMessage="No customer found.">  

                <p:column headerText="Customer ID" style="text-align: center;">  
                <h:outputText value="#{customer.customerNumber}" /> 
                </p:column>

                <p:column headerText="Fist Name" style="text-align: center;">  
                <h:outputText value="#{customer.contactFirstName}" />  
                </p:column> 

                <p:column headerText="Last Name" style="text-align: center;">  
                <h:outputText value="#{customer.contactLastName}" />  
                </p:column> 

                <p:column headerText="Sales Employee Nr." style="text-align: center;">  
                <h:outputText value="#{customer.employee.employeeNumber}" />  
                </p:column> 

                <p:column headerText="Orders">  
                <h:outputText value="#{customer.allOrders}"/>
                </p:column> 


                <p:column headerText="Payments" style="text-align: center;" >
                    <p:commandButton id="payment_btn" update=":form:p_display" oncomplete="paymentDialog.show()" icon="ui-icon-calculator">
                    <f:setPropertyActionListener target="#{customerDataTable.selectedCustomer}" value="#{customer}"/>
                    </p:commandButton>  
                    <p:tooltip for="payment_btn" value="Click to see all payments" showEffect="fade" hideEffect="fade"></p:tooltip>
                </p:column>

                <p:column headerText="Contact Data" style="text-align: center;" >
                    <p:commandButton id="contact_btn" update=":form:c_display" oncomplete="contactDialog.show()" icon="ui-icon-home">
                    <f:setPropertyActionListener target="#{customerDataTable.selectedCustomer}" value="#{customer}"/>
                    </p:commandButton>  
                    <p:tooltip for="contact_btn" value="Click to see the detailed contact data" showEffect="fade" hideEffect="fade"></p:tooltip>
                </p:column>

        </p:dataTable>
    </h:form>    
    </h:body>  

他のスレッドでは、cssを使用した解決策を見つけましたが、それも機能しませんでした(理由は、cssファイルとメソッドを作成する方法と場所がわからないためである可能性があります)。

4

2 に答える 2

6

行を分割したい場合は、CSSを使用できます。これをあなたのスタイルに追加してみてください

.ui-datatable td,.ui-datatable th {
    white-space: normal;
}

テキストに空白がない場合、ブラウザは行を分割する場所を認識しないため、これは機能しません。その場合、wbrタグを使用できますが、IEではサポートされていないことを伝えることが重要です。

参照:

于 2013-03-21T17:44:49.517 に答える
0

これをデータテーブルに追加してみてくださいscrollable="true"

于 2014-08-20T06:16:47.933 に答える