Primefaces数据表水平滚动不起作用答案

【问题标题】：Primefaces datatable horizontal scroll not workingPrimefaces数据表水平滚动不起作用
【发布时间】：2014-09-18 01:16:33
【问题描述】：

我有以下数据表并设置了 scrollable=true 和 scrollWidth=400 但表不显示为可滚动的。

水平滚动不可见，列与标题宽度不对齐。

查看表格的HTML代码，发现里面所有的s都没有样式宽度。我错过了什么？

<script type="text/javascript">
function queryAjaxEvent(data) {
    if(data.status=="success") {
         $('#part1').hide();
         $('#part2').show();
    }
}
</script>

<div id="part1">
    <h:form id="form1">
        <h:inputText id="shipmentNo"  value="#{shipmentBean.shpmntNo}"/>
        <h:commandButton action="#{shipmentBean.queryShipment}">
             <f:ajax execute="@form" render=":form2" onevent="queryAjaxEvent"/>
        </h:commandButton>
    </h:form>
</div>

<div id="part2" style="display:none;">
     <h:form id="form2">
        <p:dataTable var="ship" value="#{shipmentBean.lsShipment}" scrollable="true" scrollWidth="400">
            <p:column headerText="Shipment Id" width="50">
                <h:outputText value="#{ship.shipmentId}" />
            </p:column>
            <p:column headerText="Origin Code" width="150">
                <h:outputText value="#{ship.orgCode}" />
            </p:column>
            <p:column headerText="OriginArea" width="150">
                <h:outputText value="#{ship.orgArea}" />
            </p:column>
            <p:column headerText="Origin Facility"  width="150">
                <h:outputText value="#{ship.orgFacility}"/>
            </p:column>
            <p:column headerText="Destination Country" width="150">
                <h:outputText value="#{ship.destCountry}" />
            </p:column>
            <p:column headerText="Destination Service" width="150">
                <h:outputText value="#{ship.destService}" />
            </p:column>
            <p:column headerText="Destination Facility" width="150">
                <h:outputText value="#{ship.destFacility}"/>
            </p:column>
            <p:column headerText="PCC Data" width="150">
                <h:outputText value="#{ship.pccData}"/>
            </p:column>
            <p:column headerText="ddd aa Data" width="150">
                <h:outputText value="#{ship.dddaaData}"/>
            </p:column>
        </p:dataTable>
     </h:form>
</div>

【问题讨论】：

标签： jquery jsf primefaces datatable

【解决方案1】：

<p:column headerText="Origin Code">
      <h:outputText value="#{ship.orgCode}" width="150"/>
</p:column>

你应该在 p:column 中使用属性 width="150" 而不是 h:outputText

<p:column headerText="Origin Code" width="150">
      <h:outputText value="#{ship.orgCode}" />
</p:column>

【讨论】：

我把宽度放在 p:column 中而不是 h:outputText 但仍然没有解决问题。
你用的是什么 Primefaces 版本？
Primefaces 4.0 版
现在，我不知道。我在 Primefaces 3.5 和 5.0 上测试它工作正常。