Làm thế nào để giới hạn chiều rộng của cột trong p: dataTable, ngắt dòng/ngắt dòng, giữ một dòng?

Question

Tôi đã gặp khó khăn với Primefaces và SO là nơi cuối cùng của tôi để tìm câu trả lời cho các vấn đề.

Tôi có p:dataTable có nhiều cột nên mỗi cột phải có chiều rộng ngắn. Đối với tiêu đề, chúng có vẻ OK nhưng đối với các cột dữ liệu, chúng chia thành 2 hoặc nhiều dòng mà tôi không thích.

Tôi đã làm chiều rộng của cột đầu tiên lớn hơn để hiển thị những gì có trong bảng dữ liệu. Tiêu đề văn bản là tốt, giữ nó vào một dòng. Nhưng các cột dữ liệu thì xấu cho tôi. Tôi thích họ giữ nó ở một hàng. Tôi không muốn ngắt dòng. Dấu ba chấm là thích hợp hơn nhưng không bắt buộc.

<p:dataTable id="searchResultTable" var="searchData" value="#{registerBean.searchDataList}" 
     scrollHeight="200" 
     rowIndexVar="rowIndex" 
     rowKey="#{searchData.model}" 
     selectionMode="single" 
     selection="#{registerBean.selectedSearchData}" 
     paginator="true" rows="10" 
     paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}" 
     rowsPerPageTemplate="5,10,20" resizableColumns="true"> 
     <p:ajax event="rowSelect" listener="#{registerBean.onSelectedSearchData}"/> 
    <p:column headerText="#{registerBean.getSearchResultHeaderText(0)}" 
       width="30" style="height: 10px; font-size: 8pt;"> 
     <h:outputText value="#{registerBean.getSearchResultText(rowIndex,0)}" /> 
    </p:column> 
    <p:column headerText="#{registerBean.getSearchResultHeaderText(1)}" 
       width="30" style="10px; height: 10px; font-size: 8pt;"> 
     <h:outputText value="#{registerBean.getSearchResultText(rowIndex,1)}" /> 
    </p:column> 
    <p:column headerText="#{registerBean.getSearchResultHeaderText(2)}" 
       width="30" style="10px; height: 10px; font-size: 8pt;"> 
     <h:outputText value="#{registerBean.getSearchResultText(rowIndex,2)}" /> 
    </p:column> 

Tôi đã sử dụng h:outputText cho mỗi cột. Tôi không kiên trì với h:outputText, bất kỳ thành phần nào tôi có thể sử dụng với Primefaces đều có thể được sử dụng tốt.

Xin cảm ơn trước.

Answer 1

Tôi có thể tìm ra giải pháp. Việc thêm CSS được hiển thị bên dưới vào <p:column/> có hiệu quả đối với tôi. Dấu ba chấm không hoạt động nhưng không có đường kẻ, không có chiều cao dòng mở rộng.

<style type="text/css"> 
.singleLine 
{ 
    text-wrap:none; 
    white-space:nowrap; 
    overflow:hidden; 
    text-overflow:ellipsis; 
} 
</style> 

Và làm như thế này:

<p:column headerText="Something" 
    width="100" styleClass="singleLine" style="height: 10px; font-size: 8pt;"> 
    <h:outputText value="#{something.value}" /> 
</p:column> 

Tôi hy vọng nó sẽ giúp ít người trên quả địa cầu này.