这是一个自己前些天写的例子,现在直接切入主题。
(图一 代码调用流程图)
以上是大致整个流程的调用过程。得到后台数据的方法主要是基于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,需要的可以联系我。