Primefaces Datatable - 4.0

Question

我使用的是Primefaces 3.4。我最近升级到了primefaces 4.0。

下面的代码在3.4中正常工作。但是，升级到4.0后，我的表格facet标题不与列标题对齐。

<p:dataTable id="itunesTopSongsDt" 
      var="itunesTopSongsDtV" 
      value="#{applicationAccessMb.itunesTopSongsList}" 
      resizableColumns="false" 
      style="width: 600px; float: right; margin-right: 10px; margin-top: 0px;"> 


            <f:facet name="header"> 
             <p:row> 
              <p:column colspan="3"> 
               <p:outputPanel style="float:left;"> 
                <h:outputText id="itunesTopSongsDtHdr" 
                    value="iTunes Top 10 Songs"/> 
               </p:outputPanel> 
              </p:column> 

              <p:column>           
               <p:outputPanel style="float:right;">  
                <p:selectOneMenu id="songsChartCountrySom" 
                     value="#{applicationAccessMb.songChartCountry}" 
                     effect="fade" 
                     style="text-align: left"> 

                 <f:selectItems value="#{applicationAccessMb.reportCountry}"/> 

                 <p:ajax process="songsChartCountrySom" 
                   event="change" 
                   listener="#{applicationAccessMb.getItunesTopSongsForCountry}" 
                   update="itunesTopSongsDt"/> 

                </p:selectOneMenu> 
               </p:outputPanel> 
              </p:column> 

             </p:row> 
            </f:facet>                

            <p:column headerText="Rank" 
               width="30" 
               style="text-align: center;"> 
             <h:outputText value = "#{itunesTopSongsDtV.rank}"/> 
            </p:column> 

            <p:column width="45"> 
             <p:graphicImage url="#{itunesTopSongsDtV.imagePath}" width="45" height="45"/> 
            </p:column> 

            <p:column headerText="Artist" 
               width="200"> 
             <h:outputText value = "#{itunesTopSongsDtV.artist}" 
                 rendered="#{!itunesTopSongsDtV.itunesArtistLinkFound}"/> 
             <h:outputLink onclick="window.open('#{itunesTopSongsDtV.itunesArtistLink}', 
                      '', 'left=5,top=5,width=1080,height=700,toolbar=1,resizable=1,scrollbars=1'); return false;" 
                 rendered="#{itunesTopSongsDtV.itunesArtistLinkFound}"> 
              <h:outputText value = "#{itunesTopSongsDtV.artist}"/> 
             </h:outputLink>         
            </p:column> 

            <p:column headerText="Title" 
               width="250"> 
             <h:outputLink onclick="window.open('#{itunesTopSongsDtV.itunesLink}', 
                      '', 'left=5,top=5,width=1080,height=700,toolbar=1,resizable=1,scrollbars=1'); return false;"> 
              <h:outputText value = "#{itunesTopSongsDtV.title}"/> 
             </h:outputLink> 
            </p:column> 

           </p:dataTable> 

看到的图片。有我丢失的任何设置，我需要在primefaces做4.0

感谢 奇拉格

Answer 1

一个非常简单的解决办法用一个简单的div替换outputPanel，并对齐

<div align="left"> 
    <h:outputText id="itunesTopSongsDtHdr" value="iTunes Top 10 Songs"/> 
</div> 

Answer 2

Primefaces数据表 - 4.0

Remove all style 

First Specified table size i.e 700px; 

e.g <style="width:700px;float:left;"> 

或

Specified div 

<div style="width:700px;"> 

    <div>Write your Top ten album here </div> 

    <div>Write datatable here </div> 

</div>