项目需要用到Ajax,最开始本想用Jquery,最后权衡下选择了DWR。
这里说的是DWR整合SSH,其实DWR完全没有必要和Struts2结合,毕竟DWR需要返回的是Object,而Struts2直接转向了页面。非要强制将二者整合,只能做一个伪Action,这个伪Action返回的还是Object。当然DWR和Spring、Hibernate结合就非常好,可以将Struts2戏称为小三了 O(∩_∩)O ~
扯得有点远了,步入正题。
需求描述:
根据新闻标题(title)利用Ajax模糊查询新闻集合(这里将这些新闻集合称之为 相关新闻),并将得到的相关新闻在页面以列表的形式展示出来,且需要实现分页。
框架搭建(这里只讲与DWR有关的配置,DWR--Version: 2.0.1)à
web.xml:
view plaincopy to clipboardprint?
01.<listener> 02.<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class> 03.</listener> 04.<servlet> 05. <servlet-name>dwr-invoker</servlet-name> 06.<servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class> 07. <init-param> 08. <param-name>debug</param-name> 09. <param-value>true</param-value> 10. </init-param> 11.</servlet> 12.<servlet-mapping> 13. <servlet-name>dwr-invoker</servlet-name> 14. <url-pattern>/dwr/*</url-pattern> 15.</servlet-mapping> <listener> <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class> </listener> <servlet> <servlet-name>dwr-invoker</servlet-name> <servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class> <init-param> <param-name>debug</param-name> <param-value>true</param-value> </init-param> </servlet> <servlet-mapping> <servlet-name>dwr-invoker</servlet-name> <url-pattern>/dwr/*</url-pattern> </servlet-mapping> dwr配置文件:
view plaincopy to clipboardprint?
01.<?xml version="1.0" encoding="UTF-8"?> 02.<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 03.2.0//EN" "http://www./dwr/dwr20.dtd" > 04.<dwr> 05. <allow> 06. <create javascript="showList" creator="spring" 07. scope="application"> 08. <param name="beanName" value="dwrquery" /> 09. </create> 10. <convert match="org.huajun.news.bean.News" converter="bean"> 11. </convert> 12. <convert converter="bean" match="java.lang.StackTraceElement" /> 13. <convert converter="exception" match="java.lang.Exception" /> 14. </allow> 15.</dwr> <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN" "http://www./dwr/dwr20.dtd" > <dwr> <allow> <create javascript="showList" creator="spring" scope="application"> <param name="beanName" value="dwrquery" /> </create> <convert match="org.huajun.news.bean.News" converter="bean"> </convert> <convert converter="bean" match="java.lang.StackTraceElement" /> <convert converter="exception" match="java.lang.Exception" /> </allow> </dwr> dwr的spring配置文件(这里将其单独作为一个配置文件,需将其import到applicationContext.xml内,这里将伪action交于spring代管):
view plaincopy to clipboardprint?
01.<?xml version="1.0" encoding="UTF-8"?> 02.<beans xmlns="http://www./schema/beans" 03. xmlns:xsi="http://www./2001/XMLSchema-instance" 04. default-autowire="byName" 05. xsi:schemaLocation="http://www./schema/beans http://www./schema/beans/spring-beans-2.0.xsd"> 06. <bean id="dwrquery" class="org.huajun.dwr.action.DWRQuery" scope="prototype"> 07. <property name="qes"> 08. <ref bean="qes" /> 09. </property> 10. </bean> 11. <bean id="qes" class="org.huajun.dwr.serviceImpl.DWRQueryServiceImpl" scope="prototype"> 12. <property name="qd"> 13. <ref bean="qd" /> 14. </property> 15. </bean> 16. <bean id="qd" class="org.huajun.dwr.daoImpl.DWRQueryDaoImpl"></bean> 17.</beans> <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www./schema/beans" xmlns:xsi="http://www./2001/XMLSchema-instance" default-autowire="byName" xsi:schemaLocation="http://www./schema/beans http://www./schema/beans/spring-beans-2.0.xsd"> <bean id="dwrquery" class="org.huajun.dwr.action.DWRQuery" scope="prototype"> <property name="qes"> <ref bean="qes" /> </property> </bean> <bean id="qes" class="org.huajun.dwr.serviceImpl.DWRQueryServiceImpl" scope="prototype"> <property name="qd"> <ref bean="qd" /> </property> </bean> <bean id="qd" class="org.huajun.dwr.daoImpl.DWRQueryDaoImpl"></bean> </beans> 新闻Bean(只列举出页面列表迭代用到的字段):
view plaincopy to clipboardprint?
01.private String title;//标题 02.private String creater;//录入人 03.private int checks;//点击数 private String title;//标题 private String creater;//录入人 private int checks;//点击数 dwr package:
由于service只是简单的dao的引用,所以这里只列出核心的两个类: DWRQueryDaoImpl 和DWRQuery (DWRQuery--这个伪Action的小三) DWRQueryDaoImpl:
view plaincopy to clipboardprint?
01.public class DWRQueryDaoImpl extends HibernateDaoSupport implements DWRQueryDao { 02. 03. //此方法用于普通查询 04. public List<News> getNewsListByTitle(String title){ 05. try { 06. String hql="from News as o where o.title like '%"+title.trim()+"%'; 07. return (List<News>)super.getHibernateTemplate().find(hql); 08. } catch (RuntimeException re) { 09. throw re; 10. } 11. } 12. 13. //此方法用于dwr分页查询,其实质用的还是Hibernate的分页技术 14. //pageNo :当前页数 15. //pagesize:每页显示的记录数 16. public List<News> getNewsListByPage(final String title, final int pageNo,final int pagesize){ 17. final Map<String,List<News>> map=new HashMap<String,List<News>>(); 18. try { 19. super.getHibernateTemplate().execute(new HibernateCallback<List<News>>() 20. { 21. public List<News> doInHibernate(Session session) throws HibernateException, SQLException 22. { 23. String hql="from News as o where o.title like '%"+title.trim()+"%'; 24. Query query = session.createQuery(hql); 25. 26. int firstindex=(pageNo-1)*pagesize; 27. query.setFirstResult(firstindex).setMaxResults(pagesize); 28. 29. List list= query.list(); 30. map.put("map",list); 31. return null; 32. } 33. 34. }); 35. List returnList=map.get("map"); 36. return returnList; 37. } catch (RuntimeException re) { 38. throw re; 39. } 40. } 41.} public class DWRQueryDaoImpl extends HibernateDaoSupport implements DWRQueryDao { //此方法用于普通查询 public List<News> getNewsListByTitle(String title){ try { String hql="from News as o where o.title like '%"+title.trim()+"%'; return (List<News>)super.getHibernateTemplate().find(hql); } catch (RuntimeException re) { throw re; } } //此方法用于dwr分页查询,其实质用的还是Hibernate的分页技术 //pageNo :当前页数 //pagesize:每页显示的记录数 public List<News> getNewsListByPage(final String title, final int pageNo,final int pagesize){ final Map<String,List<News>> map=new HashMap<String,List<News>>(); try { super.getHibernateTemplate().execute(new HibernateCallback<List<News>>() { public List<News> doInHibernate(Session session) throws HibernateException, SQLException { String hql="from News as o where o.title like '%"+title.trim()+"%'; Query query = session.createQuery(hql); int firstindex=(pageNo-1)*pagesize; query.setFirstResult(firstindex).setMaxResults(pagesize); List list= query.list(); map.put("map",list); return null; } });
List returnList=map.get("map"); return returnList; } catch (RuntimeException re) { throw re; } } } DWRQuery:
view plaincopy to clipboardprint?
01.public class DWRQuery { 02. private DWRQueryService qes; //service 03. private String title;// 04. private int pagesize=10;//默认每页显示10条记录 05. 06. /** 07. * DWR 进行相关新闻分页显示 08. * pageNo 页码,从 1 开始 09. * pageSize 每页的记录数 10. * 此处返回的是Map 11. */ 12. @SuppressWarnings("unchecked") 13. public Map dwrQuery(String title, int pageNo){ 14. List<News> list=new ArrayList<News>(); 15. list=qes.getNewsListByTitle(title, colid); 16. //获得总记录数 17. Integer recordCount=list.size(); 18. //总页数 19. int pageCount=(int)Math.ceil(recordCount.doubleValue()/this.getPagesize()); 20. 21. list.clear(); 22. list=qes.getNewsListByPage(title, pageNo, this.getPagesize()); 23. Map map=new HashMap(); 24. map.put("recordCount", recordCount);//总记录数 25. map.put("pageSize", this.getPagesize());//每页显示数 26. map.put("pageCount", pageCount);//总页数 27. map.put("dataList", list);//相关新闻集合 28. 29. return map; 30. } 31.//setter and getter …… 32.} public class DWRQuery { private DWRQueryService qes; //service private String title;// private int pagesize=10;//默认每页显示10条记录 /** * DWR 进行相关新闻分页显示 * pageNo 页码,从 1 开始 * pageSize 每页的记录数 * 此处返回的是Map */ @SuppressWarnings("unchecked") public Map dwrQuery(String title, int pageNo){ List<News> list=new ArrayList<News>(); list=qes.getNewsListByTitle(title, colid); //获得总记录数 Integer recordCount=list.size(); //总页数 int pageCount=(int)Math.ceil(recordCount.doubleValue()/this.getPagesize()); list.clear(); list=qes.getNewsListByPage(title, pageNo, this.getPagesize()); Map map=new HashMap(); map.put("recordCount", recordCount);//总记录数 map.put("pageSize", this.getPagesize());//每页显示数 map.put("pageCount", pageCount);//总页数 map.put("dataList", list);//相关新闻集合 return map; } //setter and getter …… } 页面展示.jsp(只列出了DWR用到的JS和相关新闻展示列表):
view plaincopy to clipboardprint?
01.<!-- DWR JS--> 02. <script type="text/javascript"> 03. 04. currentPage=1;//当前页码全局变量 05. function changtable(pageNo){ 06. if(pageNo<1){ 07. pageNo=1;//当前页为1 08. } 09. currentPage=pageNo;//根据当前页数修改全局变量 10. var querytitle=document.getElementById("querytitle");//这里是查询字段 11. //这里调用DWRQuery的dwrQuery方法 12. showList.dwrQuery(querytitle.value,pageNo,callBackMethod); 13. } 14. 15. function callBackMethod(map){ 16. var showmsg=document.getElementById("showmsg"); 17. var colname=document.getElementById("colname").value; 18. showmsg.innerHTML=""; 19. DWRUtil.removeAllRows("tablebody"); 20. //没有查询到相应记录 21. if(map['dataList'].length==0){ 22. showmsg.innerHTML="<font color='red'>没有查询到相应记录!</font>"; 23. } else{ 24. //这里调用的DWRUtil.addRows方法可以参考我的上一篇文章 25. DWRUtil.addRows("tablebody",map['dataList'], 26. [ 27. function(item){ 28. return " <input type='checkbox' name='checkbox' value='"+item.id+ "' />" 29. }, 30. function(item){ 31.return " <a target='_blank' href="pubnews!looknew.action?id="+item.id+"'>" +item.title+"</a>" 32. 33. }, 34. function(item){return " "+item.creater}, 35. function(item){return " "+item.checks} 36. ], 37. {escapeHtml:false} ); 38. } 39. 40. showPageBar(map,currentPage);//根据 全局当前页数 调用显示页面导航的函数 41.} 42. 43. 44. //显示页码导航 45. function showPageBar(map,pageNo){ 46. var pageBar=document.getElementById("pageDiv"); 47. var recordCount=map['recordCount'];//总记录数 48. var pageSize=map['pageSize'];//每页显示记录数 49. var pageCount=map['pageCount'];//总页数 50. var pageStr="当前页:第 "+pageNo+" 页 | "; 51. pageStr+="总记录数: "+recordCount+" 条 | "; 52. pageStr+="每页显示: "+pageSize+" 条 | "; 53. pageStr+="总页数: "+pageCount+" 页 | "; 54. if(pageNo==1){ 55. pageStr += "首 页 上一页 "; 56. }else{ 57. pageStr += "<a href="javascript:changtable(1)" >首 页</a> 58. <a href="javascript:changtable("+(pageNo-1)+")" >上一页</a> "; 59. } 60. if(pageNo < pageCount){ 61. pageStr += "<a href="javascript:changtable("+(pageNo+1)+")" > 62. 下一页</a> <a href="javascript:changtable("+pageCount+")" >末 页</a> "; 63. }else{ 64. pageStr += "下一页 末 页 "; 65. } 66. pageStr += " "; 67. pageBar.innerHTML= pageStr; 68. } 69.// 引入dwr的js库文件 70.<script type='text/javascript' src='dwr/interface/showList.js'></script> 71.<script type='text/javascript' src='dwr/engine.js'></script> 72.<script type='text/javascript' src='dwr/util.js'></script> 73.//展示列表 74. <table align="center"> 75. <tbody> 76. <tr> 77. <th width="28px"> 78. <input type="checkbox" id="allche" value="checkbox" 79. title="全选/全不选" onclick="allChoose();changeIds();"> 80. </th> 81. <th > 82. 标题 83. </th> 84. <th > 85. 录入者 86. </th> 87. <th > 88. 点击数 89. </th> 90. </tr> 91. </tbody> 92. <tbody id="tablebody"> 93. </tbody> 94. </table> 95. <div id="showmsg" align="center"> 96. </div> 97. <div id="pageDiv" align="right"> 98. </div> <!-- DWR JS--> <script type="text/javascript"> currentPage=1;//当前页码全局变量 function changtable(pageNo){ if(pageNo<1){ pageNo=1;//当前页为1 } currentPage=pageNo;//根据当前页数修改全局变量 var querytitle=document.getElementById("querytitle");//这里是查询字段 //这里调用DWRQuery的dwrQuery方法 showList.dwrQuery(querytitle.value,pageNo,callBackMethod); } function callBackMethod(map){
var showmsg=document.getElementById("showmsg"); var colname=document.getElementById("colname").value; showmsg.innerHTML=""; DWRUtil.removeAllRows("tablebody"); //没有查询到相应记录 if(map['dataList'].length==0){ showmsg.innerHTML="<font color='red'>没有查询到相应记录!</font>"; } else{ //这里调用的DWRUtil.addRows方法可以参考我的上一篇文章 DWRUtil.addRows("tablebody",map['dataList'], [ function(item){ return " <input type='checkbox' name='checkbox' value='"+item.id+ "' />" }, function(item){ return " <a target='_blank' href="pubnews!looknew.action?id="+item.id+"'>" +item.title+"</a>" }, function(item){return " "+item.creater}, function(item){return " "+item.checks} ], {escapeHtml:false} ); } showPageBar(map,currentPage);//根据 全局当前页数 调用显示页面导航的函数 } //显示页码导航 function showPageBar(map,pageNo){ var pageBar=document.getElementById("pageDiv"); var recordCount=map['recordCount'];//总记录数 var pageSize=map['pageSize'];//每页显示记录数 var pageCount=map['pageCount'];//总页数 var pageStr="当前页:第 "+pageNo+" 页 | "; pageStr+="总记录数: "+recordCount+" 条 | "; pageStr+="每页显示: "+pageSize+" 条 | "; pageStr+="总页数: "+pageCount+" 页 | "; if(pageNo==1){ pageStr += "首 页 上一页 "; }else{ pageStr += "<a href="javascript:changtable(1)" >首 页</a> <a href="javascript:changtable("+(pageNo-1)+")" >上一页</a> "; } if(pageNo < pageCount){ pageStr += "<a href="javascript:changtable("+(pageNo+1)+")" > 下一页</a> <a href="javascript:changtable("+pageCount+")" >末 页</a> "; }else{ pageStr += "下一页 末 页 "; } pageStr += " "; pageBar.innerHTML= pageStr; } // 引入dwr的js库文件 <script type='text/javascript' src='dwr/interface/showList.js'></script> <script type='text/javascript' src='dwr/engine.js'></script> <script type='text/javascript' src='dwr/util.js'></script> //展示列表 <table align="center"> <tbody> <tr> <th width="28px"> <input type="checkbox" id="allche" value="checkbox" title="全选/全不选" onclick="allChoose();changeIds();"> </th> <th > 标题 </th> <th > 录入者 </th> <th > 点击数 </th> </tr> </tbody> <tbody id="tablebody"> </tbody> </table> <div id="showmsg" align="center"> </div> <div id="pageDiv" align="right"> </div> //最终实现的分页效果
本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/liuyuhua0066/archive/2011/05/31/6457568.aspx |
|