Primefaces 数据表 - 4.0答案

【问题标题】：Primefaces Datatable - 4.0Primefaces 数据表 - 4.0
【发布时间】：2014-01-20 05:19:05
【问题描述】：

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

以下代码在 3.4 中运行良好。但是在我升级到 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>

看图片。有没有我需要在 primefaces 4.0 中做的设置

谢谢奇拉格

【问题讨论】：

标签： primefaces header datatable

【解决方案1】：

一个非常简单的解决方案是将 outputPanel 替换为带有对齐的简单 div

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

【讨论】：

【解决方案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>

【讨论】：

但是如何在侧面标题行的左侧显示 iTunes 前 10 名专辑，在右侧显示国家/地区？？