如何包装素数面树表头？

问题描述：

我正在使用素数5.3。我正在使我的网页响应。我正在使用class =“ui-fluid”。虽然列已正确包装，但我无法封装树表的标题。以下技术适用于数据表。但它不适用于树形表。我的XHTML页面如下如何包装素数面树表头？

<?xml version="1.0" encoding="UTF-8" ?> 
<ui:define name="head"> 
     <style type="text/css"> 
     /** This css will be used for wrapping multi word(both space and non space) into next line **/ 
      wrap { 
       white-space: normal; 
       word-wrap: break-word; 
      } 


     </style> 
    </ui:define> 

<div class="ui-fluid"> 
    <p:tabView id="tabviewid" value="#{mplsXcListController.listOfTabs}" var="eachTabTitle" 
     activeIndex="#{mplsXcListController.activeTab}" scrollable="true"> 
     <p:ajax event="tabChange" listener="#{mplsXcListController.tabChangeCallBack}"/> 
     <p:tab id="tab_#{eachTabTitle}" title="${eachTabTitle}"> 
     <h:form name="tabForm"> 

    <p:panelGrid id="filter" columns="10" layout="grid" style="width:100%" styleClass="ui-fluid"> 

     .......... 

    </p:panelGrid> 
    <!-- <br></br> --> 
    <h:panelGrid border= "0" id="entryPage" columns="8" layout="grid" style="width: 100%;" columnClasses="ui-grid-col-1,ui-grid-col-2, ui-grid-col-1 alignmentRight,ui-grid-col-1,ui-grid-col-1,ui-grid-col-2,ui-grid-col-1,ui-grid-col-2" styleClass="ui-fluid"> 
     <p:commandButton id="prevFilter" value="${messages.lbPrevEntry}" 
      title="${messages.mPrevEntry}" ajax="false" 
      disabled="${mplsXcListController.isPrevFilterDisabled()}" 
      action="${mplsXcListController.prevMplsXcEntryList()}" 
      update="filterlineName filterNEName tmFilter tabviewid filterCount filterPage"/> 

     ........... 
    </h:panelGrid> 

      <p:treeTable id="mplsxctt" emptyMessage="${messages.noRecordFound}" var="item" value="${mplsXcListController.constituteTabFilteredDataList(eachTabTitle)}" 
       resizableColumns="true" liveResize="false" selectionMode="checkbox" selection="#{mplsXcListController.getTabData(eachTabTitle).selectedNodes}" sortMode="multiple" styleClass="wrap"> 

       <p:ajax event="select" listener="#{mplsXcListController.getTabData(eachTabTitle).onNodeSelect}"/> 
       <p:ajax event="unselect" listener="#{mplsXcListController.getTabData(eachTabTitle).onNodeUnselect}"/> 

       <p:column headerText="${messages.colLineName}" style="text-align:left;" styleClass="wrap" 
        sortBy="#{item.lineName}" > 
        <h:outputText rendered="${item.lineMainNode=='branchNode'}" value="#{item.lineName}" /> 
        <h:outputText rendered="${item.lineMainNode=='mainNode'}" style="font-weight: bold;text-align: left;" value="#{item.lineName}" /> 
       </p:column> 

       <p:column headerText="${messages.colServCapacity}" style="text-align:left;" styleClass="wrap" priority="3"> 
        <h:outputText value="#{item.serviceCapacityDisplay}" /> 
       </p:column> 
       ....................... 

      </p:treeTable> 
      </h:form> 
     </p:tab>   
    </p:tabView> 


</div> 
</ui:define> 
</ui:composition>

答

你必须重载的CSS属性white-space，使用此：

.wrap { 
    white-space: normal!important; 
    word-wrap: break-word; 
}

不工作的primefaces树表头。 –

你确定你有“。” “换行”之前？ '.wrap'我已经试过了代码和它为我工作。 –

当我使用p：columnGroup type =“header”分隔标题时，我的代码对数据表正常工作。但是对于树表头，虽然值正确包装，但不包装。请让我知道你是否成功地包装了primefaces（5.3）的头部或者不是？ –

答

 For wrapping headers in data table, I also used column group like following` 
<ui:define name="head"> 
       <style type="text/css"> 

       /** This css will be used for wrapping multi word(both space and non space) into next line **/ 

        .wrap { 
         white-space: normal; 
         word-wrap: break-word; 
        } 

       </style> 
      </ui:define> 
     <p:columnGroup type="header"> 
          <p:row> 
          <p:column headerText="${messages.colPhyLineName}" style="text-align:left; white-space:normal; word-wrap:break-word;" sortBy="#{item.phyLineName}" sortFunction="#{stringHandling.numericSortOfString}"/>      
          </p:row> 
     </p:columnGroup> 
     <p:column 
       style="text-align: left; " styleClass="wrap" > 
       <h:outputText value="#{item.phyLineName}" /> 
     </p:column> 

    For treetable, I have to override default treetable css 

    <style type="text/css"> 

    <!-- This css has been overriden so that headers of tree tables wrap properly if screen size is small. 
    This is done locally as original behaviour may be required for some usecase 
    --> 

    .ui-treetable thead th { 
     white-space: normal; 
     word-wrap: break-word; 
    } 

    </style>

如何包装素数面树表头？

相关推荐