当前位置: 代码迷 >> JavaScript >> JSF 分页提案
  详细解决方案

JSF 分页提案

热度:250   发布时间:2012-11-14 10:12:19.0
JSF 分页方案

一、方案一

?

1.使用MyFaces的扩展组件Tomahawk 1.1.9<t:dataTable><t:dataScroller>标签

2.例子

?

                         <h:form prependId="false">

                            <t:panelGrid>

                                <t:saveState value="#{viewCustomerInfo.customerInfos}"/>

                                <t:dataTable id="paginator" value="#{viewCustomerInfo.customerInfos}" var="info" preserveDataModel="false" rows="3" styleClass="tb1" width="100%" border="0" cellspacing="0" cellpadding="0">

                                   <h:column>

                                       <f:facet name="header"><h:outputText value="code"/></f:facet>

                                       <h:outputText value="#{info.customerCode}"/>

                                   </h:column>

                                   <h:column>

                                       <f:facet name="header"><h:outputText value="name"/></f:facet>

                                       <h:outputText value="#{info.customerName}"/>

                                   </h:column>

                                </t:dataTable>

                                <t:dataScroller id="scroller" paginator="true" paginatorMaxPages="9" fastStep="5" paginatorActiveColumnStyle="font-weight:bold;" for="paginator" immediate="true">

                                   <f:facet name="first">

                                       <t:graphicImage url="../img/page/first.jpg" border="1" width="20px" height="18px"/>

                                   </f:facet>

                                   <f:facet name="fastrewind">

                                       <t:graphicImage url="../img/page/rewind.jpg" border="1" width="20px" height="18px"/>

                                   </f:facet>

                                   <f:facet name="previous">

                                       <t:graphicImage url="../img/page/previous.jpg" border="1" width="20px" height="18px"/>

                                   </f:facet>

                                   <f:facet name="next">

                                       <t:graphicImage url="../img/page/next.jpg" border="1" width="20px" height="18px"/>

                                   </f:facet>

                                   <f:facet name="fastforward">

                                       <t:graphicImage url="../img/page/forward.jpg" border="1" width="20px" height="18px"/>

                                   </f:facet>

                                   <f:facet name="last">

                                       <t:graphicImage url="../img/page/last.jpg" border="1" width="20px" height="18px"/>

                                   </f:facet>

                                </t:dataScroller>

                            </t:panelGrid>

                         </h:form>

?

3.?说明:

1)使用一组dataTabledataScroller标签,其中dataTable必须指定idrows(当然还有value

2)将dataScrollerfor属性的值设置为dataTableid来完成关联(如果将dataScroller嵌套在dataTable的内部则不需要该设定)

3dataScroller中的facet标签的name值是固定取值(first,fastrewind,previous,next,fastforward,last来分别表示首页,上N页(其中NdataScrollerfastStep的属性值,上一页,下一页,下N页,末页))

4)由于dataTable中的数据是一次性读取(且manage-beanscoperequest),在翻页时数据会丢失,所以要用到<t:saveState>来保存状态,当然,如果manage-beandscopesession则不会有此问题

5)此方案的局限性:只适合数据量较小的分页,因为该方案一次行将数据全部取出并保存在内存中,如果数据超过一定的量,则影响性能,方案二解决了该问题

?

?

?

二、方案二

?

1.???? 使用MyFaces的扩展组件Tomahawk 1.1.9<t:dataTable><t:dataScroller>标签

2.???? DataModel进行封装,该DataModel仅仅持有了一页的数据DataPage,并在适当的时候加载数据,读取我们需要页的数据。(代码见附件java code.jar)

3.???? DataModel 是一个抽象类,用于封装各种类型的数据源和数据对象的访问,JSFdataTable中绑定的数据实际上被包装成了一个DataModel,以消除各种不同数据源和数据类型的复杂性

4. 例子

?

                        <h:form prependId="false">

<t:panelGrid>

                                <%--<t:saveState value="#{viewCustomerInfo.customerInfos}"/>--%>

                                <t:dataTable id="paginator" value="#{viewCustomerInfo.dataModel}" var="info" preserveDataModel="false" rows="3" styleClass="tb1" width="100%" border="0" cellspacing="0" cellpadding="0">

                                   <h:column>

                                       <f:facet name="header"><h:outputText value="code"/></f:facet>

                                       <h:outputText value="#{info.customerCode}"/>

                                   </h:column>

                                   <h:column>

                                       <f:facet name="header"><h:outputText value="name"/></f:facet>

                                       <h:outputText value="#{info.customerName}"/>

                                   </h:column>

                                </t:dataTable>

                                <t:dataScroller id="scroller" paginator="true" paginatorMaxPages="9" fastStep="5" paginatorActiveColumnStyle="font-weight:bold;" for="paginator" immediate="true">

                                   <f:facet name="first">

                                       <t:graphicImage url="../img/page/first.jpg" border="1" width="20px" height="18px"/>

                                   </f:facet>

                                   <f:facet name="fastrewind">

                                       <t:graphicImage url="../img/page/rewind.jpg" border="1" width="20px" height="18px"/>

                                   </f:facet>

                                   <f:facet name="previous">

                                       <t:graphicImage url="../img/page/previous.jpg" border="1" width="20px" height="18px"/>

                                   </f:facet>

                                   <f:facet name="next">

                                       <t:graphicImage url="../img/page/next.jpg" border="1" width="20px" height="18px"/>

                                   </f:facet>

                                   <f:facet name="fastforward">

                                       <t:graphicImage url="../img/page/forward.jpg" border="1" width="20px" height="18px"/>

                                   </f:facet>

                                   <f:facet name="last">

                                       <t:graphicImage url="../img/page/last.jpg" border="1" width="20px" height="18px"/>

                                   </f:facet>

                                </t:dataScroller>

                            </t:panelGrid>                         

</h:form>

?

5.说明

说明(1)(2)(3)同方案一

4)因为此方案dataTablevalue值是绑定一个dataModel,所以不需要用<t:saveState>来保存状态

5)需要扩展抽象类javax.faces.model.DataModel,并定义一个DataPage对象来保存每页的记录

6)所有扩展和自定义的类(见附件)

7)此方案每次翻页只会取得所需页的数据,结合BaseHibernateService定义的方法,每次翻页返回一个DatePage对象

?

【参考文章】

1. http://www.blogjava.net/steady/archive/2005/12/30/26013.html

2. http://blog.sina.com.cn/s/blog_602feaa80100gdqu.html?

  相关解决方案