浏览 4111 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (1)
|
|
---|---|
作者 | 正文 |
发表时间:2011-01-26
sns 评论 ajax 分页 和二级 评论 ajax 分页 ssh2 实现 源码下组 jar 在jar_1 jar_2 下载 数据 mysql测试可以
经过周六日的研究 终于弄明白 ajax 分页的实现了。
基本上就是利用了 jquery 的一个函数
$("#id").load(url,function() {});
首先 进入 评论页面 -> load 评论 ,评论 再 -> load 子评论。
按照 组件开发的方式 编写分页标签。
package com.freewebsys.core.sns.taglib; import javax.servlet.jsp.JspException; import javax.servlet.jsp.tagext.TagSupport; import com.freewebsys.core.sns.page.PageConf; public class PageTaglib extends TagSupport { private String id;// 标识不同分页,当一个页面有多个分页时, private String action; private int start; private int limit; private int total; private String otherValue; private String theme; // 默认 分页跳转 js.兼容写法。兼容刷新分页 和 ajax分页。都调js函数。ajax要重写 goPage函数 private static final String DEFAULT_PAGE_JS = "<script type='text/javascript'>function goPage(url){location.href = url;}</script>"; // 分页 div 开始 private final String DEFAULT_THEME_BEGIN = "<div class='pagination' id='Pagination'>"; private final String MINI_THEME_BEGIN = "<div class='paginationMini' id='PaginationMini'>"; // 分页 div 结束 private final String DEFAULT_THEME_END = "</div>"; // 分页字符串 private final String PAGE_A = "<a href=\"javaScript:void(0);\" onclick=\"goPage('"; // 默认样式模板 @Override public int doStartTag() throws JspException { try { if (total <= limit) {// 如果还不够一页 就不显示 return super.doEndTag(); } // 初始化参数.每次独立计算.否则分页有问题. PageConf pageConf = new PageConf(start, limit, total); String ctx = pageContext.getServletContext().getContextPath() + "/"; ctx += action; if (action.indexOf("?") >= 0) {// 如果存在?号用& ctx += "&" + findOtherValue(); } else {// 否则用? ctx += "?" + findOtherValue(); } PageConf pageConfFirst = new PageConf(start, limit, total); String firstUrl = ctx; PageConf pageConfPrev = new PageConf(start, limit, total); String prevUrl = ctx; PageConf pageConfNext = new PageConf(start, limit, total); String nextUrl = ctx; PageConf pageConfLast = new PageConf(start, limit, total); String lastUrl = ctx; // pageContext.setAttribute("gridPanelWidth", width); // pageContext.setAttribute("gridPanelHeight", height); if (pageConf.hastPrevious()) { pageConfFirst.getFirst(); firstUrl += "&start=" + pageConfFirst.getStart(); pageConfPrev.getPrevious(); prevUrl += "&start=" + pageConfPrev.getStart(); } if (pageConf.hasNext()) { pageConfNext.getNext(); nextUrl += "&start=" + pageConfNext.getStart(); pageConfLast.getLast(); lastUrl += "&start=" + pageConfLast.getStart(); } // 直接将数据写到页面 String str = genCenterButtons(start, limit, total, ctx); if (theme == null || theme.equals("")) { writeToPage(DEFAULT_PAGE_JS);// 默认跳转函数 writeToPage(DEFAULT_THEME_BEGIN); writeToPage(str); } else if (theme.equals("ajax")) {// 普通ajax分页 writeToPage(DEFAULT_THEME_BEGIN); writeToPage(str); } else if (theme.equals("miniAjax")) {// mini型ajax分页 writeToPage(MINI_THEME_BEGIN); if (id != null) {//标识不用分页 str = str.replace("goPage", "goMiniPage_" + id); } else { str = str.replace("goPage", "goMiniPage"); } writeToPage(str); } // 如果是ajax就要在页面重写goPage函数 writeToPage(DEFAULT_THEME_END); } catch (Exception e) { e.printStackTrace(); } return super.doEndTag(); } /** * 生成多个跳转按钮方法,如1,2,3,4,5这样的按钮跳转最大7页跳转 */ private String genCenterButtons(int start, int limit, int total, String ctx) { // 初始化参数.每次独立计算.否则分页有问题. PageConf pageConf = new PageConf(start, limit, total); PageConf pageConfTemp1 = new PageConf(start, limit, total); PageConf pageConfTemp2 = new PageConf(start, limit, total); // 结束页 PageConf pageConfTempLast = new PageConf(start, limit, total); // pageConfTempLast.getLast(); // 字符串拼写. StringBuilder strOut = new StringBuilder(); // 设置开始为当前页往前3页,最小1 int begin = Math.max(1, (pageConf.getCurrentPage() + 1) - 3); // 设置结束为当前页往后3页,最大到总页数 int end = Math.min((pageConf.getCurrentPage() + 1) + 3, pageConf.getTotalPage()); int abs = 5 - Math.abs(pageConfTempLast.getCurrentPage() - pageConf.getCurrentPage()); if (abs > 0) { begin = pageConf.getCurrentPage() - abs; begin = Math.min(begin, (pageConf.getCurrentPage() + 1) - 3); begin = Math.max(1, begin); } // 计算当前页和首页的距离 abs = 7 - pageConf.getCurrentPage(); if (abs > 0) { end = pageConf.getCurrentPage() + abs; end = Math.max((pageConf.getCurrentPage() + 1) + 3, end); end = Math.min(end, pageConf.getTotalPage()); } if (pageConf.getTotalPage() > 7) {// 如果大于7显示首页末页 // 显示前一页 if (pageConfTemp1.hastPrevious()) { pageConfTemp1.getPrevious(); strOut.append(PAGE_A + ctx + "&start=" + pageConfTemp1.getStart() + "');\">"); strOut.append("上一页</a>"); } if (pageConf.getCurrentPage() > 3) { // 显示第 1 strOut.append(PAGE_A + ctx + "&start=" + (0) + "');\">"); strOut.append(1); strOut.append("</a>"); if (pageConf.getCurrentPage() > 4) { // 显示第 2 页 strOut.append(PAGE_A + ctx + "&start=" + (0 + pageConf.getLimit()) + "');\">"); strOut.append(2); strOut.append("</a>"); } strOut.append("…"); } } // if(pageConf.getCurrentPage()) // 循环显示数字 for (int i = begin; i <= end; i++) { // 循环多个table的button int startTemp = (i - 1) * pageConf.getLimit(); if (i == (pageConf.getCurrentPage() + 1)) { strOut.append("<span class='current'>"); strOut.append(i);// 当前页显示禁用 strOut.append("</span>"); } else { strOut.append(PAGE_A + ctx + "&start=" + startTemp + "');\">"); strOut.append(i); strOut.append("</a>"); } } // 末页显示,显示最后一页和倒数第二页 if (pageConf.getTotalPage() > 7) {// 如果大于7显示首页末页 if (pageConf.getCurrentPage() < (pageConfTempLast.getCurrentPage() - 3)) { // 如果当前页是倒数第4页就不显示 strOut.append("…"); // System.out.println(pageConf.getCurrentPage() + "/" // + pageConfTempLast.getCurrentPage()); if (pageConf.getCurrentPage() < (pageConfTempLast .getCurrentPage() - 4)) { // 如果当前页是倒数第4页就不显示倒数第2页 strOut.append(PAGE_A + ctx + "&start=" + (pageConfTempLast.getStart() - pageConf .getLimit()) + "');\">"); strOut.append(pageConfTempLast.getCurrentPage()); strOut.append("</a>"); } strOut.append(PAGE_A + ctx + "&start=" + pageConfTempLast.getStart() + "');\">"); strOut.append(pageConfTempLast.getCurrentPage() + 1); strOut.append("</a>"); } // 显示下一页 if (pageConfTemp2.hasNext()) { pageConfTemp2.getNext(); strOut.append(PAGE_A + ctx + "&start=" + pageConfTemp2.getStart() + "');\">"); strOut.append("下一页</a>"); } } return strOut.toString(); } /** * 添加其他参数. */ private String findOtherValue() { String tempValue = ""; if (otherValue != null && !"".equals(otherValue)) { // 将数据按照','进行分开. String[] values = otherValue.split(","); for (int i = 0; i < values.length; i++) { // 从request里面取得数据value. String temp = (null == pageContext.getRequest().getParameter( values[i]) ? "" : pageContext.getRequest() .getParameter(values[i])); if (i == 0) {// 如果是第一个.直接等于.否则就添加& tempValue = values[i] + "=" + temp; } else { tempValue += "&" + values[i] + "=" + temp; } } } return tempValue; } @Override public int doEndTag() throws JspException { try { // 读取模板 // writeToPage("<!--GridPanelPage结束-->");// 完成一个h3不读取模板 } catch (Exception e) { e.printStackTrace(); } return super.doEndTag(); } private void writeToPage(String strOut) { try { pageContext.getOut().print(strOut); } catch (Exception e) { e.printStackTrace(); } } ....get set 方法略.. }
用来生成 分页标签 其中分页参数 是pageconf
package com.freewebsys.core.sns.page; import java.util.List; /* * 分页类开始.*./ /** 排序字段. */ public class PageConf { private String sortField; /** 排序升降.des,aesc. */ private String sortDir; /** 分页开始. */ private int start; /** 分页结束. */ private int end; /** 每页最大数. */ private int limit; /** 分页总数. */ private int total; private List data; public List getData() { return data; } public void setData(List data) { this.data = data; } public int getCurrentPage() { return (int) Math.floor((double) start / limit); } public int getTotalPage() { /** 取得总共的页数. */ return (int) Math.ceil((double) total / limit); } public void getGo(int page) {/* 页面跳转函数.输入要跳转的页面. */ System.out.println("page:[" + page); int totalPage = getTotalPage(); int currentPage = getCurrentPage(); if (page <= 1) {/* 如果小于1.跳到首页. */ getFirst(); return; } else if (page >= totalPage) {/* 如果大于总页数跳到末页. */ getLast(); return; } else if (page == currentPage) {/* 当前页返回. */ return; } else {/* 否则进行页面跳转.也就是计算start和end. */ this.start = (page - 1) * limit; this.end = Math.min(page * limit, total); } // System.out.println("getGo:[" + toString()); } public void getNext() { // System.out.println("getNextPage"); int currentPage = getCurrentPage(); int tempStart = (currentPage + 1) * limit; if (tempStart >= total) { return; } this.start = tempStart; this.end = Math.min((currentPage + 2) * limit, total); // System.out.println("getNext" + toString()); } public void getFirst() { // System.out.println("getFirst"); this.start = 0; this.end = Math.min(limit, total); // System.out.println("getFirst" + toString()); } public void getLast() { // System.out.println("getEnd"); int lastPage = getTotalPage(); /** 如果刚好总页数刚好被整除.就往前一页. */ if ((lastPage * limit) >= total) { lastPage--; } this.start = lastPage * limit; this.end = Math.min((lastPage + 1) * limit, total); // System.out.println("getLast" + toString()); } public void getPrevious() { // System.out.println("getPreviouspage"); int currentPage = getCurrentPage(); /** 前一页等于当前页数乘以每页记录数. */ this.start = Math.max((currentPage - 1) * limit, 0); this.end = Math.max((currentPage) * limit, limit); // System.out.println("getPrevious" + toString()); } public boolean hasNext() { // System.out.println("hasNext" + toString()); if (this.end == this.total) { return false; } else if (this.getTotalPage() <= 1) { return false; } else { return true; } } public boolean hastPrevious() { // System.out.println("hastPrevious" + toString()); if (this.start == 0) { return false; } else { return true; } } public PageConf(int start, int limit, int total) {/* 构造函数.设置开始.和分页数. */ this.start = start; this.limit = limit; // 重新计算end. int currentPage = getCurrentPage(); this.end = Math.min((currentPage + 1) * limit, total); this.total = total; // System.out.println("PageConf" + toString()); } ....get set 方法略.. }
显示底部评论分页 显示二级评论的小分页
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib prefix="s" uri="/struts-tags"%> <%@ taglib prefix="fsns" uri="http://freewebsys.sns.googlecode.com"%> <%request.setAttribute("ctx",request.getContextPath());//重新设置缩写. %> <%request.setAttribute("img_ctx",request.getContextPath()+"/common/css/web/images");//重新设置缩写. %> <script type="text/javascript"> <!-- function showReplay(objId){//{status.index} $('#replaySubComment_'+objId+'_id').toggle(); $('#replayTextarea_'+objId+'_id').focus(); } function hideReplay(objId){//{status.index} $('#replaySubComment_'+objId+'_id').hide(); } function saveReplayComment(objId){ if($('#replayTextarea_'+objId+'_id').val() == ''){ alert('请输入评论内容。'); } $.ajax({ url:'saveComment.html', type:"POST", data:{ 'appType':'${appType}', 'appId':'${appId}', 'parentId':$('#replayParentId_'+objId+'_id').val(), 'commentContent':$('#replayTextarea_'+objId+'_id').val()}, success:function(data){//回调函数 if(data == 1){ $('#replayTextarea_'+objId+'_id').val(''); $('#replaySubComment_'+objId+'_id').hide(); //重新加载子分页 var parentId = $('#replayParentId_'+objId+'_id').val(); $("#subComment_"+objId+"_id").html("<div align='center' style='padding-top:50px'><img src='${img_ctx}/loading_blue_big.gif'></div>'"); $("#subComment_"+objId+"_id").load("${ctx}/listSubComment.html?appType=${param.appType}&appId=${param.appId}&parentId="+parentId,function() { $('html,body').animate({scrollTop: $("#comment_"+objId+"_id").offset().top}, 1); }); } } }); } function goPage(url){ //加载 loading 图片 $("#comment_id").html("<div align='center' style='padding-top:50px'><img src='${img_ctx}/loading_blue_big.gif'></div>'"); $("#comment_id").load(url,function() { $('html,body').animate({scrollTop: $("comment_anchor_id").offset().top}, 1); }); } //--> </script> <ul> <s:iterator value="page.data" status="status"> <li id="comment_${id}_id" class="comlist"> <div class="left" style="width: 65px;"> <span class="headpic50"> <a href="" class="tips"><img src="http://toeoso-laptop/thinksns/data/userface/000/00/00/1_small_face.jpg"/></a></span></div> <div style="margin-left: 65px;"> <div style="padding-bottom: 20px;"> <h3 class="tit_Critique lh25 mb5"> <span class="right f12px mr5"><span> <a href="javaScript:void(0);" onclick="showReplay('${id}');">回复</a></span> </span> <a href="/thinksns/index.php?s=/space/1">管理员</a><em class="cGray2">37分钟前</em></h3> <p><s:property value="comment"/></p> </div> <span id="subComment_${id}_anchor_id"></span> <div id="subComment_${id}_id" class="subcomment"> <script type="text/javascript"> <!-- $(document).ready(function(){ $("#subComment_${id}_id").html("<div align='center' style='padding-top:50px'><img src='${img_ctx}/loading_blue_big.gif'></div>'"); $("#subComment_${id}_id").load("${ctx}/listSubComment.html?appType=${param.appType}&appId=${param.appId}&parentId=${id}",function() {}); }); //--> </script> </div> </div> </li> </s:iterator> </ul> <fsns:page action="listComment.html" otherValue="appType,appId" start="${page.start}" limit="${page.limit}" total="${page.total}" theme="ajax"/> 上面是评论分页load jsp 页面。
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib prefix="s" uri="/struts-tags"%> <%@ taglib prefix="fsns" uri="http://freewebsys.sns.googlecode.com"%> <%request.setAttribute("ctx",request.getContextPath());//重新设置缩写. %> <%request.setAttribute("img_ctx",request.getContextPath()+"/common/css/web/images");//重新设置缩写. %> <s:iterator value="page.data" status="subStatus"> <div class="sublist pt5 clear" id="subComment_${parentId}_${subStatus.index}_id"> <div class="left" style="width: 50px;"> <span class="pic38"><a href="" class="tips" rel=""><img src="http://toeoso-laptop/thinksns/data/userface/000/00/00/1_small_face.jpg"></a></span> </div> <div style="margin-left: 50px;"> <h3 class="tit_Critique lh20 mb5"><span class="right f12px mr5"> <span class="ml5"><a href="###" onclick="deleteComment('${status.index}_${subStatus.index}')">删除</a></span> </span><a href="/thinksns/index.php?s=/space/1">管理员</a><em class="cGray2">37分钟前</em></h3> <p><s:property value="comment"/></p> </div> <div class="c"></div> </div> </s:iterator> <!-- 子回复框 Begin --> <input name="comment.parentId" id="replayParentId_${parentId}_id" type="hidden" value="${parentId}"/> <div style="display: none;" id="replaySubComment_${parentId}_id"> <div class="pt5 clear"> <div class="left" style="width: 50px;"><span class="pic38"><img src="http://toeoso-laptop/thinksns/data/userface/000/00/00/1_small_face.jpg" id="face"></span></div> <div style="margin-left: 50px; overflow: hidden;"> <textarea id="replayTextarea_${parentId}_id" name="comment.comment" rows="4" style="width: 99%;" class="Text" onblur="this.className='Text'" onfocus="this.className='Text1'"></textarea> <input type="submit" class="btn_b mt5" value="回 复" onclick="saveReplayComment('${parentId}');"> <input type="button" class="btn_w mt5" value="取消" onclick="hideReplay('${parentId}');"/> </div> </div> </div> <!-- 子回复框 End --> <fsns:page id="${parentId}" action="listSubComment.html" otherValue="parentId,appType,appId" start="${page.start}" limit="${page.limit}" total="${page.total}" theme="miniAjax"/> <script type="text/javascript"> <!-- function goMiniPage_${parentId}(url){ //加载 loading 图片 $("#subComment_${parentId}_id").html("<div align='center' style='padding-top:50px'><img src='${img_ctx}/loading_blue_big.gif'></div>'"); $("#subComment_${parentId}_id").load(url,function() { $('html,body').animate({scrollTop: $("#subComment_"+objId+"_anchor_id").offset().top}, 1); }); } //--> </script>
上面是 子评论 分页的 load的 jsp 页面。
整个 页面的样式 是 参考 thinksns 的评论的样式的。 使用的技术 是 ssh2 数据库 是mysql。
protected String appType;// 应用类型 如blog
protected Integer appId;// 应用Id
可以设计 针对 不同应用 进行评论。
打算利用 自己独立 开发一个 类似于 替换 thinksns 的社区。 界面 没有美工 就参考 thinksns 数据也部分参考 thinksns 然后 按照模块 进行分布开发。
前端 用 jquery 和 jqueryui 进行。
声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|
返回顶楼 | |
发表时间:2011-02-10
楼主发的我运行了,点上去没反应。不知道是不是我的问题。
|
|
返回顶楼 | |
发表时间:2011-02-10
可否把这个项目的源码上传一下,研究一下,谢谢了
|
|
返回顶楼 | |
发表时间:2011-02-17
asialee 写道 可否把这个项目的源码上传一下,研究一下,谢谢了 源码 都传上去了。。整个的 sns 还没有写完。。 |
|
返回顶楼 | |