Question

假设我在richfaces extendedDataTable组件中显示的行数超过10行，并且我希望在初始加载时显示最少10行。如果用户想要查看剩余的行，则用户必须使用垂直滚动条向下滚动我使用的代码如下。

<rich:layout position="center" style="overflow:hidden">
        <rich:layoutPanel position="center" >
                <rich:extendedDataTable enableContextMenu="false" 
                    style="vertical-align: top; horizontal-align: center; "
                    id="filtertable" value="#{dynamicBean.selectedData.filterDetList}"
                    var="bdata" height="#{reportDesignerBean.height}"
                    showWhenRendered="false" rowClasses="datatable-odd,datatable-even"
                    selectedClass="grid-selection-style"
                    noDataLabel="#{msg['bnp.common.extendedDataTable.noDataLabel']}">

                    <rich:column width="110px">
                        <f:facet name="header">
                            <h:outputLabel value="#{msg['bnp.reortdesign.customreport.sqlreports.columnname']}" />
                        </f:facet>
                        <h:panelGrid id="filterName">
                            <h:outputText value="#{bdata.columnLabel}" />
                        </h:panelGrid>
                    </rich:column>

                    <rich:column width="110px" style="text-align:center;" >
                        <f:facet name="header">
                            <h:outputLabel value="#{msg['bnp.reortdesign.customreport.sqlreports.isafilter']}" />
                        </f:facet>
                        <h:selectBooleanCheckbox id="checkOne" value="#{bdata.rowSelected}"  >              
                            <a4j:support event="onclick" ajaxSingle="true" limitToList="true">                      
                                <f:setPropertyActionListener target="#{bdata}" value="#{bdata}"/>
                            </a4j:support>

                        </h:selectBooleanCheckbox>
                    </rich:column>
                    <rich:column width="320px">
                        <f:facet name="header"><h:outputLabel value="#{msg['bnp.reortdesign.customreport.sqlreports.filtervalue']}" /></f:facet>
                        <h:panelGrid width="380px" id="filtervalue" columns="3">
                        ${bdata.columnDataType}
                        <c:if test="#{bdata.columnDataType != 'Date'}">
                            <h:inputText value="#{bdata.value}" maxlength="150"
                                style="width:240px">
                                <a4j:support event="onchange" ajaxSingle="true" limitToList="true">
                                    <f:setPropertyActionListener target="#{bdata}" value="#{bdata}"/>
                                </a4j:support>
                            </h:inputText>
                        </c:if> 
                        <c:if test="#{bdata.columnDataType == 'Date'}"  >
                            <rich:calendar id="fixedDateValue" datePattern="#{loginBean.userPrefVO.preferredDateFmt}"
                                           value="#{bdata.value}" buttonIcon="true" showWeeksBar="false"
                                           weekDayLabelsShort="Su,Mo,Tu,We,Th,Fr,Sa"
                                           oninputfocus="#{rich:component('fixedDateValue')}.doExpand();"
                                           onclick="#{rich:component('fixedDateValue')}.doExpand()" width="20px"
                                           buttonClass="calendar-button-style">
                                <f:convertDateTime type="date" pattern="#{loginBean.userPrefVO.preferredDateFmt}" />
                                <f:facet name="header">
                                    <h:panelGrid columns="3" width="50%"
                                                 columnClasses="fake, width100 talign">
                                        <h:outputText value="{previousMonthControl}"
                                                      style="font-weight:bold;" />
                                        <h:outputText value="{currentMonthControl}"
                                                      style="font-weight:normal;padding-left:15px; text-align:center; cursor:pointer"
                                                      disabled="true" />
                                        <h:outputText value="{nextMonthControl}"
                                                      style="font-weight:bold;" />
                                    </h:panelGrid>
                                </f:facet>
                                <f:facet name="fixedDateValue" style=""></f:facet>
                            </rich:calendar>
                        </c:if>
                            <rich:spacer width="20px" />                
                        </h:panelGrid>
                    </rich:column>

                    <rich:column width="205px">
                        <f:facet name="header">
                            <h:outputLabel value="#{msg['bnp.reortdesign.customreport.sqlreports.datatype']}"/>
                        </f:facet>
                        <h:panelGrid id="filterdatatype">
                            <h:outputText value="#{bdata.columnDataType}"  style="color:green;font-style: italic;font-size:10px;"/>
                        </h:panelGrid>
                    </rich:column>
                </rich:extendedDataTable>
                <!-- <a4j:outputPanel id="fScrollerPanel">       
                    <rich:datascroller id="filterScroller" for="filtertable"  ></rich:datascroller>       
                </a4j:outputPanel> -->
            </rich:layoutPanel>     
        </rich:layout>

Answer 1

来自Richfaces showcase:

为了启用Ajax加载 - 您应该只指定 clientRows 属性以及要在客户端上加载的行数。在下面的示例中，根据复选框值将其设置为15或0。 0值表示加载所有行（或者根本没有定义属性）。

如何使用垂直滚动条在富表面extendedDataTable中显示最少10行？

1 个答案: