Question

我有以下数据表并设置了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>

Answer 1

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

你应该使用属性width =＆＃34; 150＆＃34;在p：列中而不是h：outputText

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

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

1 个答案: