使用struts2标签定制ajax版的分页组件

2013/03/11 10:43:37 No Comments

上一文中,我们介绍了如何使用page.jsp界面输出分页信息,那么针对于像动态表格,或者需要局部刷新的界面又如何处理呢。道理其实还是很简单,我们只需要按照需求让它按指定的动作进行即可以了。

具体的作法也很简单,我们只需要将所有的链接修改为一个点击函数就可以了,那么当点击链接时,具体界面怎么跳转,以及刷新哪个部分,这其实就与分页组件无关了。我们只需要将相应的链接传递给调用方,让调用方自行处理就行了,这样也可以保证分页组件的通用性。

在实现层面,原来的链接就是一个href链接,那么修改为ajax版之后,我们就将这个href链接当成一个参数传递给调用方,比如可以定义一个clickPage函数,然后把href传递给clickPage即可,当然,你也可以同时传递当前的页码,具体实现由需求决定。
简单参考代码如下所示:

<s:url id="goto"><s:param name="page.currentPage" value="1"/></s:url>
<s:a href="%{goto}" onclick="clickPage('' + this.href);return false;" title="首页"></s:a>

附完整实现代码:

<%-- 这是分页组件ajax版,即被嵌入到ajax显示的界面中,所以相应的链接均被替换为点击事件,以由上层调用方来确保相应的点击能够
按照正确的方式工作,规定相应的点击事件为clickPage(url),中间传递的参数为点击时触发的url链接.
 created by flym 2010-09-20
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!-- 分页组件 -->
<s:if test="page.hasPreviousPage || page.hasNextPage">
	<div class="turnpage">
			<%-- 开头两个 --%>
		<s:url id="goto"><s:param name="page.currentPage" value="1"/></s:url>
		<s:a href="%{goto}" onclick="clickPage('' + this.href);return false;" title="首页"><span class="ui-icon ui-icon-arrowthickstop-1-w"></span></s:a>
		<s:if test="page.hasPreviousPage">
			<s:url id="goto">
				<s:param name="page.currentPage" value="%{page.currentPage - 1}"/>
			</s:url>
		</s:if>
		<s:a href="%{goto}" onclick="clickPage('' + this.href);return false;" title="上一页"><span class="ui-icon ui-icon-triangle-1-w"></span></s:a>
			<%-- 页面显示 --%>

		<s:if test="page.totalPage <= 6">
			<s:bean name="org.apache.struts2.util.Counter" id="counter">
				<s:param name="first" value="1"/>
				<s:param name="last" value="page.totalPage"/>
			</s:bean>
			<s:iterator value="#counter">
				<s:url id="goto"><s:param name="page.currentPage" value="top"/></s:url>
				<s:if test="top == page.currentPage"><a class="cur"><span><s:property/></span></a></s:if>
				<s:else><s:a href="%{goto}" onclick="clickPage('' + this.href);return false;"><span><s:property/></span></s:a></s:else>
			</s:iterator>
		</s:if>
		<s:else>
			<s:bean name="org.apache.struts2.util.Counter" id="counter">
				<s:param name="first"
						 value="%{page.currentPage % 6 == 0 ? page.currentPage - 5 : page.currentPage / 6 * 6 + 1}"/>
				<s:param name="last"
						 value="%{page.currentPage % 6 == 0 ? page.currentPage : (page.currentPage / 6 * 6 + 6) < page.totalPage ? (page.currentPage / 6 * 6 + 6) : page.totalPage}"/>
			</s:bean>
			<s:iterator value="#counter">
				<s:url id="goto"><s:param name="page.currentPage" value="top"/></s:url>
				<s:if test="top == page.currentPage"><a class="cur"><span><s:property/></span></a></s:if>
				<s:else><s:a href="%{goto}" onclick="clickPage('' + this.href);return false;"><span><s:property/></span></s:a></s:else>
			</s:iterator>
		</s:else>
			<%-- 结尾两个 --%>
		<s:url id="goto"><s:param name="page.currentPage" value="page.totalPage"/></s:url>
		<s:if test="page.hasNextPage">
			<s:url id="goto"><s:param name="page.currentPage" value="%{page.currentPage + 1}"/></s:url>
		</s:if>
		<s:a href="%{goto}" onclick="clickPage('' + this.href);return false;" title="下一页"><span class="ui-icon ui-icon-triangle-1-e"></span></s:a>
		<s:url id="goto"><s:param name="page.currentPage" value="page.totalPage"/></s:url>
		<s:a href="%{goto}" onclick="clickPage('' + this.href);return false;" title="尾页"><span class="ui-icon ui-icon-arrowthickstop-1-e"></span></s:a>&nbsp;&nbsp;
		页次:<s:property value="page.currentPage"/>/<s:property value="page.totalPage"/>&nbsp;&nbsp;
		每页:<s:property value="page.pageSize"/>条&nbsp;&nbsp;
		共计:<s:property value="page.totalCount"/>条&nbsp;&nbsp;
		<s:if test="page.totalPage <= 100">
			<s:bean name="org.apache.struts2.util.Counter" id="counter">
				<s:param name="first" value="1"/>
				<s:param name="last" value="page.totalPage"/>
			</s:bean>
			<select onchange="clickPage('' + $(this).val());return false;" size="1">
				<s:iterator value="#counter">
					<s:url id="goto"><s:param name="page.currentPage" value="top"/></s:url>
					<s:if test="top == page.currentPage">
						<option value="<s:property value="%{goto}"/>" selected="selected">第<s:property/>页</option>
					</s:if>
					<s:else>
						<option value="<s:property value="%{goto}"/>">第<s:property/>页</option>
					</s:else>
				</s:iterator>
			</select>
		</s:if>
	</div>
</s:if>

转载请标明出处:i flym
本文地址:https://www.iflym.com/index.php/code/201303110002.html

相关文章:

留下足迹