Question

您好我是JSF＆amp;总理，我必须完成一项任务，因为有一天我想弄清楚问题。该任务的主要目标是使用primefaces 5.3使数据表具有响应性。我必须添加具有不同功能的滚动条和分页器.. 这是我的代码：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui">
    <h:panelGrid id="exposureGrid" width="100%">
          <h:panelGrid columns="2" columnClasses="TopLeftColumn,TopLeftColumn">
           <p:dataTable reflow="true" id="dtExposure" var="expo" value="#{expoBean.exposureList}" rowKey="#{expo.key}" paginator="true" paginatorAlwaysVisible="true"  
                     widgetVar="expoTable" emptyMessage="No Exposure Data" rowIndexVar="rowIndex" scrollable="true"  scrollWidth="100%" frozenColumns="2"
                     selectionMode="single" selection="#{expoBean.selectedExpo}" resizableColumns="true" style="width:100%"
                     paginatorPosition="bottom" rows="20" rowsPerPageTemplate="20,50,100" rowStyleClass="mappingTable"
                     paginatorTemplate=" {PreviousPageLink} {CurrentPageReport} {NextPageLink}">

             <p:ajax event="rowSelect" listener="#{geocodeBean.onRowSelect}" update=":form:expoMap :form:msg" />
             <p:ajax event="rowUnselect" listener="#{geocodeBean.onRowUnselect}" update=":form:expoMap" />

          <p:columnGroup type="header">
              <p:row>

                <p:column rowspan="2" width="30" headerText=" " style="text-align:center" />

                <p:column colspan="#{expoBean.colspanSite}" >
                  <f:facet name="header">
                      <p:selectBooleanButton value="#{expoBean.showSite}" onLabel="-" offLabel="+" >
                           <p:ajax listener="#{expoBean.showSiteChanged}" update="dtExposure" />
                      </p:selectBooleanButton>
                      <h:outputText value=" Site " />
                   </f:facet>
                </p:column>

                <p:column colspan="#{expoBean.colspanGeo}">
                  <f:facet name="header">
                       <p:selectBooleanButton value="#{expoBean.showGeo}" onLabel="-" offLabel="+" >
                           <p:ajax listener="#{expoBean.showGeoChanged}" update="dtExposure" />
                      </p:selectBooleanButton>
                      <h:outputText value=" Geolocation" />
                   </f:facet>
                </p:column>

                <p:column colspan="#{expoBean.colspanIv}" >
                   <f:facet name="header">
                      <p:selectBooleanButton value="#{expoBean.showIv}" onLabel="-" offLabel="+" >
                            <p:ajax listener="#{expoBean.showIvChanged}" update="dtExposure"/>
                      </p:selectBooleanButton>
                      <h:outputText value=" IV " />
                   </f:facet>
                </p:column>

                <p:column colspan="#{expoBean.colspanRms}" >
                   <f:facet name="header">
                      <p:selectBooleanButton value="#{expoBean.showRms}" onLabel="-" offLabel="+" >
                            <p:ajax listener="#{expoBean.showRmsChanged}" update="dtExposure"/>
                      </p:selectBooleanButton>
                      <h:outputText value=" RMS " />
                   </f:facet>
                </p:column>

            </p:row>
            <p:row>
                <p:column headerText="Name" sortBy="#{expo.locName}" filterBy="#{expo.locName}" filterStyle="width:40px;"/>
                <p:column headerText="Divisions" sortBy="#{expo.divStr}" filterBy="#{expo.divStr}" filterStyle="width:40px;" rendered="#{expoBean.showDataColumnMap['Divisions']}"/>
                <p:column headerText="Reference" sortBy="#{expo.extRef}" filterBy="#{expo.extRef}" filterStyle="width:40px;" rendered="#{expoBean.showDataColumnMap['ExtRef']}"/>
                <p:column headerText="Description" sortBy="#{expo.locDesc}" filterBy="#{expo.locDesc}" filterStyle="width:40px;" rendered="#{expoBean.showDataColumnMap['Description']}"/>

                <p:column headerText="Country" sortBy="#{expo.country}" filterBy="#{expo.country}" filterStyle="width:40px;"/>
                <p:column headerText="State" sortBy="#{expo.state}" filterBy="#{expo.state}" filterStyle="width:40px;" rendered="#{expoBean.showDataColumnMap['State']}"/>
                <p:column headerText="City" sortBy="#{expo.city}" filterBy="#{expo.city}" filterStyle="width:40px;" rendered="#{expoBean.showDataColumnMap['City']}"/>
                <p:column headerText="Zip" sortBy="#{expo.zip}" filterBy="#{expo.zip}" filterStyle="width:40px;" rendered="#{expoBean.showDataColumnMap['Zip']}"/>
                <p:column headerText="Address" width="150" sortBy="#{expo.fullAddress}" filterBy="#{expo.fullAddress}" filterStyle="width:40px;" rendered="#{expoBean.showDataColumnMap['Address']}"/>
                <p:column headerText="Longitude" sortBy="#{expo.longitude}" filterBy="#{expo.longitude}" filterStyle="width:40px;" filterFunction="#{expoBean.filterDouble}" rendered="#{expoBean.showDataColumnMap['Longitude']}"/>
                <p:column headerText="Latitude" sortBy="#{expo.latitude}"  filterBy="#{expo.latitude}" filterStyle="width:40px;" filterFunction="#{expoBean.filterDouble}" rendered="#{expoBean.showDataColumnMap['Latitude']}"/>
                <p:column headerText="Geoscope" sortBy="#{expo.geoCode}"  filterBy="#{expo.geoCode}" filterStyle="width:40px;" rendered="#{expoBean.showDataColumnMap['Geoscope']}"/>
                <p:column headerText="Accuracy" sortBy="#{expo.accuracy}"  filterBy="#{expo.accuracy}" filterStyle="width:40px;" rendered="#{expoBean.showDataColumnMap['Accuracy']}"/>

                <p:column headerText="TIV" sortBy="#{expo.tiv}" filterBy="#{expo.tiv}" filterStyle="width:40px;" filterFunction="#{expoBean.filterDouble}"/>
                <p:column headerText="Building" sortBy="#{expo.bld.tiv}" filterBy="#{expo.bld.tiv}" filterStyle="width:40px;" filterFunction="#{expoBean.filterDouble}" rendered="#{expoBean.showDataColumnMap['Building']}"/>
                <p:column headerText="Content" sortBy="#{expo.cnt.tiv}" filterBy="#{expo.cnt.tiv}" filterStyle="width:40px;" filterFunction="#{expoBean.filterDouble}" rendered="#{expoBean.showDataColumnMap['Content']}"/>
                <p:column headerText="BI" sortBy="#{expo.bi.tiv}" filterBy="#{expo.bi.tiv}" filterStyle="width:40px;" filterFunction="#{expoBean.filterDouble}" rendered="#{expoBean.showDataColumnMap['BI']}"/>
                <p:column headerText="Currency" sortBy="#{expo.currency}" filterBy="#{expo.currency}" filterStyle="width:40px;" rendered="#{expoBean.showDataColumnMap['Currency']}"/>
                <p:column headerText="Occupancy" sortBy="#{expo.occupType}" filterBy="#{expo.occupType}" filterStyle="width:40px;"/>

                <p:column headerText="Construction" sortBy="#{expo.constrClass}" filterBy="#{expo.constrClass}" filterStyle="width:40px;" rendered="#{expoBean.showDataColumnMap['Construction']}"/>
                <p:column headerText="Built"  sortBy="#{expo.yearBuilt}" filterBy="#{expo.yearBuilt}" filterStyle="width:40px;" rendered="#{expoBean.showDataColumnMap['Built']}"/>
                <p:column headerText="Storey"  sortBy="#{expo.storeyAbove}" filterBy="#{expo.storeyAbove}" filterStyle="width:40px;" rendered="#{expoBean.showDataColumnMap['Storey']}"/>
            </p:row>
        </p:columnGroup>


             <p:column width="10" style="text-align:center;" styleClass="colIdx">
                <p:selectBooleanCheckbox value="" />
                <p:commandLink action="#{expoBean.setupEditExposure(expo)}" styleClass="editBtn" style="float:left;" update=":form:locationDetail" title="Show details" oncomplete="PF('locationDialog').show()" />
                <p:commandLink action="#{expoBean.setupEditExposure(expo)}" styleClass="mapBtn" style="float:left;" update=":form:locationDetail" title="Show details" oncomplete="PF('locationDialog').show()" />

            </p:column>

            <p:column sortBy="#{expo.locName}" >
                <h:outputText value="#{expo.locName}" title="#{expo.id}(#{expo.contract.id})" />
            </p:column>

            <p:column style="text-align:center;" rendered="#{expoBean.showDataColumnMap['Divisions']}">
                <h:outputText value="#{expo.divLabel}" />
            </p:column>

            <p:column rendered="#{expoBean.showDataColumnMap['ExtRef']}">
                <h:outputText value="#{expo.extRef}" />
            </p:column>

            <p:column rendered="#{expoBean.showDataColumnMap['Description']}">
                <h:outputText value="#{expo.locDesc}" title="#{expo.err}" />
            </p:column>

            <p:column width="32" style="text-align: center" rendered="false">
                 <p:commandButton action="#{expoBean.findSimilar(expo)}" oncomplete="PF('expoCompDialog').show()" update=":form:expoComp" icon="ui-icon-copy" title="Search existing similar exposures" />
            </p:column>

            <p:column styleClass="geoStyle" style="text-align:center;">
              <h:outputText value="#{expo.country}" title="#{expo.errors['Country']}" /> <br />
            </p:column>

            <p:column headerText="State" styleClass="geoStyle" style="text-align:center;" rendered="#{expoBean.showDataColumnMap['State']}">
                <h:outputText value="#{expo.state}" />
            </p:column>

            <p:column headerText="City" styleClass="geoStyle" style="text-align:center;" rendered="#{expoBean.showDataColumnMap['City']}">
                <h:outputText value="#{expo.city}" />
            </p:column>

            <p:column headerText="Zip" styleClass="geoStyle" style="text-align:center;" rendered="#{expoBean.showDataColumnMap['Zip']}">
                <h:outputText value="#{expo.zip}" />
            </p:column>

            <p:column headerText="Address" width="150" styleClass="geoStyle" rendered="#{expoBean.showDataColumnMap['Address']}">
                <h:outputText value="#{expo.fullAddress}" />
            </p:column>

            <p:column headerText="Longitude" width="80" styleClass="geoStyle"  style="text-align:right;" rendered="#{expoBean.showDataColumnMap['Longitude']}">
              <p:cellEditor>
                   <f:facet name="output">
                     <h:panelGroup layout="block" styleClass="#{(expo.errors['Longitude'] != null) ? 'dataError': ((expo.warns['Longitude'] != null) ? 'dataWarn':null)}">
                        <h:outputText value="#{expo.longitude}" title="Acc: #{expo.trilliumAcc}">
                            <f:convertNumber maxFractionDigits="6"/>
                        </h:outputText>
                        <br />
                     </h:panelGroup>
                   </f:facet>
                   <f:facet name="input">
                      <p:inputText value="#{expo.longitude}" >
                           <f:convertNumber maxFractionDigits="6"/>
                      </p:inputText>
                   </f:facet>
                </p:cellEditor>
            </p:column>

            <p:column headerText="Latitude" styleClass="geoStyle" width="80" style="text-align:right;" rendered="#{expoBean.showDataColumnMap['Latitude']}">
                <p:cellEditor>
                   <f:facet name="output">
                     <h:panelGroup layout="block" styleClass="#{(expo.errors['Latitude'] != null) ? 'dataError': ((expo.warns['Latitude'] != null) ? 'dataWarn':null)}">
                        <h:outputText value="#{expo.latitude}" title="Tcr: #{expo.trilliumTcr}">
                           <f:convertNumber maxFractionDigits="6"/>
                        </h:outputText>
                        <br />
                      </h:panelGroup>
                   </f:facet>
                   <f:facet name="input">
                      <p:inputText value="#{expo.latitude}" >
                           <f:convertNumber maxFractionDigits="6"/>
                      </p:inputText>
                   </f:facet>
                </p:cellEditor>
            </p:column>

             <p:column headerText="Goscope" width="50" styleClass="geoStyle" rendered="#{expoBean.showDataColumnMap['Geoscope']}">
                <h:outputText value="#{expo.geoCode}" />
            </p:column>

            <p:column headerText="Accuracy" width="50" styleClass="geoStyle" rendered="#{expoBean.showDataColumnMap['Accuracy']}">
                <h:outputText value="#{expo.accuracy}" />
            </p:column>

            <p:column styleClass="ivStyle" style="text-align:right;" >
              <h:panelGroup layout="block" styleClass="#{(expo.errors['TIV'] != null) ? 'dataError':null}">
                <h:outputText value="#{expo.tiv}" >
                    <f:convertNumber maxFractionDigits="0" />
                </h:outputText>
               </h:panelGroup>
            </p:column>

            <p:column styleClass="ivStyle" style="text-align:right;" rendered="#{expoBean.showDataColumnMap['Building']}">
               <p:cellEditor>
                   <f:facet name="output">
                    <h:panelGroup layout="block" styleClass="#{(expo.errors['BLD'] != null) ? 'dataError':null}">
                        <h:outputText value="#{expo.bld.tiv}" >
                            <f:convertNumber maxFractionDigits="0" />
                        </h:outputText>
                    </h:panelGroup>
                   </f:facet>
                   <f:facet name="input">
                        <p:inputText value="#{expo.bld.tiv}" >
                            <f:convertNumber maxFractionDigits="0" />
                        </p:inputText>
                   </f:facet>
                </p:cellEditor>
            </p:column>

            <p:column styleClass="ivStyle" style="text-align:right;" rendered="#{expoBean.showDataColumnMap['Content']}">
               <p:cellEditor>
                   <f:facet name="output">
                    <h:panelGroup layout="block" styleClass="#{(expo.errors['CNT'] != null) ? 'dataError':null}">
                        <h:outputText value="#{expo.cnt.tiv}" >
                            <f:convertNumber maxFractionDigits="0" />
                        </h:outputText>
                       </h:panelGroup>
                   </f:facet>
                   <f:facet name="input">
                        <p:inputText value="#{expo.cnt.tiv}" >
                            <f:convertNumber maxFractionDigits="0" />
                        </p:inputText>
                   </f:facet>
                </p:cellEditor>
            </p:column>

            <p:column styleClass="ivStyle" style="text-align:right;" rendered="#{expoBean.showDataColumnMap['BI']}">
               <p:cellEditor>
                   <f:facet name="output">
                     <h:panelGroup layout="block" styleClass="#{(expo.errors['BI'] != null) ? 'dataError':null}">
                        <h:outputText value="#{expo.bi.tiv}" >
                            <f:convertNumber maxFractionDigits="0" />
                        </h:outputText>
                     </h:panelGroup>
                   </f:facet>
                   <f:facet name="input">
                        <p:inputText value="#{expo.bi.tiv}" >
                            <f:convertNumber maxFractionDigits="0" />
                        </p:inputText>
                   </f:facet>
                </p:cellEditor>
            </p:column>

           <p:column styleClass="ivStyle"  style="text-align:center;" rendered="#{expoBean.showDataColumnMap['Currency']}">
                <p:cellEditor>
                   <f:facet name="output">
                    <h:panelGroup layout="block" styleClass="#{(expo.errors['Currency'] != null) ? 'dataError':null}">
                        <h:outputText value="#{expo.currency}" title="#{expo.errors['Currency']}" /> <br />
                    </h:panelGroup>
                   </f:facet>
                   <f:facet name="input">
                        <p:inputText value="#{expo.currency}" />
                   </f:facet>
                </p:cellEditor>
            </p:column>

            <p:column styleClass="rmsStyle" style="text-align:center;" >
                <p:cellEditor>
                   <f:facet name="output">
                     <h:panelGroup layout="block" styleClass="#{(expo.errors['Occupancy'] != null) ? 'dataError':((expo.warns['Occupancy'] != null) ? 'dataWarn':null)}">
                       <h:outputText value="#{expo.occupType}"  title="#{expo.errors['Occupancy']} #{expo.warns['Occupancy']}"/> <br />
                     </h:panelGroup>
                   </f:facet>
                   <f:facet name="input">
                        <p:inputText value="#{expo.occupType}" />
                   </f:facet>
                </p:cellEditor>
            </p:column>

            <p:column styleClass="rmsStyle" style="text-align:center;" rendered="#{expoBean.showDataColumnMap['Construction']}">
                <p:cellEditor>
                   <f:facet name="output">
                    <h:panelGroup layout="block" styleClass="#{(expo.errors['Construction'] != null) ? 'dataError':null}">
                      <h:outputText value="#{expo.constrClass}" /> <br />
                    </h:panelGroup>
                   </f:facet>
                   <f:facet name="input">
                        <p:inputText value="#{expo.constrClass}" />
                   </f:facet>
                </p:cellEditor>
            </p:column>

            <p:column styleClass="rmsStyle" style="text-align:center;" rendered="#{expoBean.showDataColumnMap['Built']}">
                <p:cellEditor>
                   <f:facet name="output">
                     <h:panelGroup layout="block" styleClass="#{(expo.errors['Built'] != null) ? 'dataError':((expo.warns['Built'] != null) ? 'dataWarn':null)}">
                       <h:outputText value="#{expo.yearBuilt}"  title="#{expo.errors['Built']} #{expo.warns['Built']}"/> <br />
                     </h:panelGroup>
                   </f:facet>
                   <f:facet name="input">
                        <p:inputText value="#{expo.yearBuilt}" />
                   </f:facet>
                </p:cellEditor>
            </p:column>

            <p:column styleClass="rmsStyle" style="text-align:center;" rendered="#{expoBean.showDataColumnMap['Storey']}">
                <p:cellEditor>
                   <f:facet name="output">
                     <h:panelGroup layout="block" styleClass="#{(expo.errors['Storey'] != null) ? 'dataError':((expo.warns['Storey'] != null) ? 'dataWarn':null)}">
                       <h:outputText value="#{expo.storeyAbove}"  title="#{expo.errors['Storey']} #{expo.warns['Storey']}"/> <br />
                     </h:panelGroup>
                   </f:facet>
                   <f:facet name="input">
                        <p:inputText value="#{expo.storeyAbove}" />
                   </f:facet>
                </p:cellEditor>
            </p:column>
       </p:dataTable>
      </h:panelGrid>     
        <f:facet name="footer" width="100%">
            <div class="ui-grid-row ui-grid-responsive" style="background-color:#f3f3f3;height:42px;margin-top:20px;" >
                <div class="ui-grid-col-2">
                    <p:commandButton value="Quit"  styleClass="quit_btn"   />
                </div>
                 <div class="ui-grid-col-4 ui-grid-responsive" style="position:relative;float:right;">
                    <p:commandButton value="Upload" style="margin:5px 18px 5px 5px;"  styleClass="upload_btn"   />
                    <p:commandButton value="Save"  style="margin:5px;" styleClass="save_btn"  />
                 </div> 
            </div>
      </f:facet>

         <h:panelGroup id="expoMap" layout="block">
            <h:panelGrid width="100%" columnClasses="CenterColumn" rendered="#{expoBean.showMap}">
               <p:gmap center="#{geocodeBean.gmapCenter}" zoom="#{geocodeBean.gmapZoom}" type="HYBRID" model="#{geocodeBean.gmapModel}" widgetVar="map" 
                  onPointClick="handlePointClick(event);" style="width:100%;height:500px" >
                 <p:ajax event="overlaySelect" listener="#{geocodeBean.onMarkerSelect}" update="msg" /> 
               </p:gmap>
           </h:panelGrid>
         </h:panelGroup>
    </h:panelGrid>  
</html>

实际上我正在处理现有的项目，我将我的项目升级为Prime-faces 5.3 .. 这一步是否足以在素面上起作用，或者我必须添加任何内容吗？

如果有人提出解决问题的建议，那就太好了。

Answer 1

如果您只是希望它具有响应性，您可以添加以下内容：

<p:column colspan="#{expoBean.colspanGeo}" priority="2">
    <f:facet name="header">
        <p:selectBooleanButton value="#{expoBean.showGeo}" onLabel="-" offLabel="+" >
            <p:ajax listener="#{expoBean.showGeoChanged}" update="dtExposure" />
        </p:selectBooleanButton>
        <h:outputText value=" Geolocation" />
    </f:facet>
</p:column>

Paginator和Scrollers是默认设置，您可以使用属性在datatable元素上设置此项。

如何使用Prime面5.3使用分页器和滚动条响应数据表？

1 个答案: