首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

JSF 分页提案

2012-11-14 
JSF 分页方案一、方案一?1.使用MyFaces的扩展组件Tomahawk 1.1.9的t:dataTable和t:dataScroller标签2.

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" stylewidth="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)使用一组dataTable和dataScroller标签,其中dataTable必须指定id和rows(当然还有value)

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

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

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

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

?

?

?

二、方案二

?

<h:form prependId="false"><t:panelGrid> <%--<t:saveState value="#{viewCustomerInfo.customerInfos}"/>--%> <t:dataTable id="paginator" value="#{viewCustomerInfo.dataModel}" var="info" preserveDataModel="false" rows="3" stylewidth="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>

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

(4)因为此方案dataTable的value值是绑定一个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?

热点排行