这是一个自己前些天写的例子,现在直接切入主题。

(图一 代码调用流程图)
以上是大致整个流程的调用过程。得到后台数据的方法主要是基于Ajax实现的,那么,在此使用了DWR框架,对于DWR框架的介绍,大家可以利用Google进行搜索,它主要是方便我们在前台页码利用Javascript去调用后台的Java代码。在示例中的话,我是利用了DWR中StudentUtils的paginationAllStudent()获得数据并在前台显示,而这个paginationAllStudent()方法,就是对应与后台Java代码中的StudentinfoDAO.paginationAllStudent()方法。这里只是类名的不同,因为在DWR配置文件中进行了配置。
接下来分析一下主要的代码。
(1)PaginationSupport类,具体代码实现不写,主要用于封装当前页面信息。如:当前第几页,共多少条记录,前后页索引等。
public class PaginationSupport implements java.io.Serializable {
public final static int PAGESIZE = 10;
private int pageSize = PAGESIZE;
private int totalCount;
private int currentPage;
private int startIndex;
private int[] indexes = new int[0];
private int nextIndex;
private int previousIndex;
private int pageCount;
private List items; //存放从数据库取得的数据
private int lastIndex;
....
....
}
(2)StudentinfoDAO类中的paginationAllStudent()方法,主要是用于获得数据,返回PaginationSupport类型,
(3)DWR配置文件
<!--因为我使用了Spring,所以采取了这种方式--> <create creator="spring" javascript="StudentUtils"> <param name="beanName" value="studentinfoDAO" /> </create> <!--如果一般情况下,使用以下配置就可以了--> <create creator="new" javascript="Demo"> <param name="class" value="your.java.Bean" /> </create> <!--转换前台获得数据可能用到的JavaBean--> <!--效果即可以使用以下类中的getXXX方法在前台得到数据--> <convert match="org.wiki.student.utils.PaginationSupport" converter="bean"/> <convert match="org.wiki.student.domain.models.*" converter="bean"/>
(4)前台页面Javascript代码
function getData(startIndex){
//调用DWR中的方法获得数据,startIndex翻页索引
//假如每页5条数据,那么第一页为0,第二页为5...
//callback为DWR中的回调函数,用于获得数据
StudentUtils.paginationAllStudent(startIndex, callback);
}
//定义回调函数,即如何显示数据
function callback(data){
//这里采用dwr工具包util中方法进行数据输出
//注意这里的data参数,出现多次,并非指同一个对象
//首先清空页面中id为tableContent的tbody标签数据
dwr.util.removeAllRows("tableContent");
//定义数据输出方式的一个函数组。
//以下data参数其实可以自己任意命名
var cellfuncs = [function(data){
//获得当前数据,并构建一个超链接
var aTemp = document.createElement("a");
aTemp.href="${pageContext.request.contextPath }/student/course.do?sid="+data.stuid;
aTemp.innerHTML=data.stuid+"查看详情";
return aTemp;},
function(data){return data.stuno;},
function(data){return data.stuname;},
function(data){
//后台数据为m或w 字符,在此格式化输出
if(data.sex=='m')
return '男';
else
return '女';
},
function(data){ return data.fomartDate;},
function(data){return data.address;},
function(data){return data.telephone;},
function(data){return data.remark;},
]
//为id是tableContent的tbody填充数据,数据集存放在data.items,
// 填充的输出方式为cellfuncs
dwr.util.addRows("tableContent",data.items,cellfuncs);
}
以上基本上是主要涉及的代码,可能还会涉及到一些页面初始化的Javascript,需要的可以联系我。
本文介绍了一个基于DWR框架实现的分页查询示例。通过Ajax技术从前端调用后端Java代码,实现学生信息的分页展示。重点介绍了PaginationSupport类、StudentinfoDAO类中的paginationAllStudent()方法、DWR配置文件及前端JavaScript代码。
1738

被折叠的 条评论
为什么被折叠?



