Primefaces数据表-4.0

我用的是PrimeFaces3.4。我最近升级到primefaces 4.0

<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>  

下面的代码在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>  

<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中，我是否缺少任何需要执行的设置

<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>  

谢谢

---

Chirag数据表-4.0

<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>  

Remove all style

First Specified table size i.e 700px;

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

删除所有样式
第一个指定的表大小，即700px；
例如

或

<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>  

指定的div
在这里写下你的十大专辑
在此处写入数据表

一个非常简单的解决方案是用带有align的简单div替换outputPanel

<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>  

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

---

但是，我如何才能在facet标题行的左侧显示iTunes前10张专辑，在右侧显示国家/地区？？