使用easyUI datagrid分页

我用了比较简单的sturts2和mybatis结合的小测试demo实现的。

一、使用easyUI datagrid分页注意事项及原理：

1.EasyUI的DataGrid要求返回的JSON数据集是这样的形式：

【“total”:总记录数量, "rows":数据记录数组】

{"total":14,"rows":[{"deptNo":20,"empName":"SMITH","empNo":7369,"hireDate":345830400000,"job":"CLERK","mgr":7902,"sal":800},{"comm":300,"deptNo":30,"empName":"ALLEN","empNo":7499,"hireDate":351446400000,"job":"SALESMAN","mgr":7698,"sal":1600},{"comm":500,"deptNo":30,"empName":"WARD","empNo":7521,"hireDate":351619200000,"job":"SALESMAN","mgr":7698,"sal":1250},{"deptNo":20,"empName":"JONES","empNo":7566,"hireDate":354988800000,"job":"MANAGER","mgr":7839,"sal":2975},{"comm":1400,"deptNo":30,"empName":"MARTIN","empNo":7654,"hireDate":370454400000,"job":"SALESMAN","mgr":7698,"sal":1250}]}

2. 页面（jsp）从后台（action）取数据时，默认的传递了两个参数，page和rows。

page：当前第几页，如同我们自己定义的pageSize。就是页面所处的位置。

rows：即一页中显示多少条数据，如同自己定义的pageCode。

因此，在后台调用分页方法时，传入的pageSize，pageCode就变成了page、rows。

3. easyUI的DataGrid要求返回的是JSON数据集形式的字符串，不是普通的字符串，它得到的后台数据要放到map集合中，并以ajax形式异步提交过去。例如下面代码：

Pager pager = new EmpDao().pagerShow(page, Integer.parseInt(rows));//自己写的分页方法

Map<String, Object> jsonMap = new HashMap<String, Object>();//定义map集合

jsonMap.put("rows", pager.getEmpList());//一页中显示的数据，放入map集合

jsonMap.put("total", pager.getTotalCount());//数据的总记录数，放入map集合

//将有时间格式的json字符串格式化

String json = JSON.toJSONStringWithDateFormat(jsonMap, "yyyy-MM-dd");

//将json字符串异步提交到前台。

try {

PrintWriter out = response.getWriter();

out.write(json);

out.flush();

out.close();

} catch (IOException e) {

// TODO Auto-generated catch block

e.printStackTrace();

}

4. 必不可少的是，自己定义pager分页方法和pager的实例对象（pojo）；

二、具体实现案例：

（一）jsp页面

jsp头部引入easyui的核心文件。

$(function(){

$("#show").datagrid({

title:"员工列表",

iconCls:"icon_title",

height:374,

method:"post",//是get形式ajax请求

url:"${pageContext.request.contextPath}/total!pagerShow.action",

columns:[[

{ field: 'empNo', title: '员工编号', width: 180, align: 'center' },

{ field: 'empName', title: '姓名', width: 100, align: 'center' },

{ field: 'job', title: '职位', width: 100, align: 'center' },

{ field: 'mgr', title: '上司编号', width: 150, align: 'center' },

{ field: 'hireDate', title: '入职日期', width: 150, align: 'center' },

{ field: 'sal', title: '工资', width: 100, align: 'center' },

{ field: 'comm', title: '奖金', width: 100, align: 'center' },

{ field: 'deptNo', title: '部门号', width: 80, align: 'center' },

{title:"<b>操作</b>",width:200,field:"opt",resizable:false,formatter:function(val,rec,i){

var s = "<a href=\"javascript:void(0);\" onclick=\"mesClassOpt('show','"+rec.id+"','"+rec.schClass+"')\"><img src=\"${pageContext.request.contextPath}/skins/icon/grid_show.png\" style=\"margin-bottom:-3px;\"/>进入班级</a> ";

var e = "<a href=\"javascript:void(0);\" onclick=\"mesClassOpt('update','"+rec.id+"')\"><img src=\"${pageContext.request.contextPath}/skins/icon/grid_update.png\" style=\"margin-bottom:-3px;\"/>查看</a> ";

var d = "<a href=\"javascript:void(0);\" onclick=\"mesClassOpt('delete','"+rec.id+"')\"><img src=\"${pageContext.request.contextPath}/skins/icon/grid_delete.png\" style=\"margin-bottom:-3px;\"/>删除</a>";

return s+e+d;

}}

]],

striped:true,//是否显示斑马线效果。

singleSelect:true,

pagination:true,//是否显示分页

pageSize:10,//一页显示多少条数据

pageList:[10]

});

---------------------------------------------------------------------------------------------------------------------------------

在body中定义：

</div>

(二) 在定义的action中

package com.fencer.action;

import java.io.IOException;

import java.io.PrintWriter;

import java.util.HashMap;

import java.util.List;

import java.util.Map;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import org.apache.struts2.interceptor.ServletRequestAware;

import org.apache.struts2.interceptor.ServletResponseAware;

import com.alibaba.fastjson.JSON;

import com.alibaba.fastjson.JSONObject;

import com.fencer.mapper.EmpDao;

import com.fencer.pojo.Emp;

import com.fencer.pojo.Pager;

public class TotalAction implements ServletRequestAware, ServletResponseAware {

private HttpServletResponse response;

@Override

public void setServletResponse(HttpServletResponse response) {

// TODO Auto-generated method stub

this.response = response;

}

private HttpServletRequest request;

@Override

public void setServletRequest(HttpServletRequest request) {

this.request = request;

}

//需要定义的两个参数

private String page;//页面

private String rows;//pageSize

get、set方法略

//分页展示，从这里取后台数据

public String pagerShow(){

Pager pager = new EmpDao().pagerShow(page, Integer.parseInt(rows));//自定义的分页方法

Map<String, Object> jsonMap = new HashMap<String, Object>();//构建一个map集合

jsonMap.put("rows", pager.getEmpList());//一页中显示的数据，放入map集合

jsonMap.put("total", pager.getTotalCount());//数据的总记录数，放入map集合

//将有时间格式的json字符串格式化

String json = JSON.toJSONStringWithDateFormat(jsonMap, "yyyy-MM-dd");

//将数据返回到前台页面

try {

PrintWriter out = response.getWriter();

out.write(json);

out.flush();

out.close();

} catch (IOException e) {

// TODO Auto-generated catch block

e.printStackTrace();

}

return null;

}

（三）dao中自定义的方法

因为我只使用了sturts2和mybatis，因此需要引入sqlsession，获得数据。

//分页展示

public Pager pagerShow(String pageCode, int pageSize) {

//oracle数据库测试-------------------------------------

//打开session

SqlSession session = MyBatisUtil.getSessionFactory().openSession(true);

if(pageCode == null){

pageCode = "1";

}

Pager pager = new Pager();

pager.setPageCode(pageCode);

pager.setPageSize(pageSize);

//将两个参数放到map集合，因为在empDao.xml中，传入两个以上参数需要定义成map，详见EmpDao.xml

Map<String, Object> map = new HashMap<String, Object>();

map.put("pageCode", Integer.parseInt(pageCode));

map.put("pageSize", pageSize);

//传进参数，查询数据

List<Emp> empList = session.selectList("com.fencer.mapper.EmpDao.showPager",map);

pager.setEmpList(empList);//将查处的数据塞给pager中的empList属性。

int totalCount = session.selectOne("com.fencer.mapper.EmpDao.countEmp");//查询总记录数

pager.setTotalCount(totalCount);

return pager;

}

（四）mapper映射文件

<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE mapper

PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"

"http://mybatis.org/dtd/mybatis-3-mapper.dtd">

</resultMap>

select * from EMP

</select>

select t2.* from ( select t1.*, rownum as rn from (select * from emp ) t1 where rownum <![CDATA[ <= ]]> #{pageCode}*#{pageSize}) t2 where t2.rn <![CDATA[ >= ]]> ((#{pageCode}-1)*#{pageSize}+1)

</select>

select count(*) from EMP

</select>

select * from EMP where EMPNO = #{empNo}

</select>

insert into EMP(EMPNO,ENAME,JOB,MGR,HIREDATE) values(#{empNo},#{empName},#{job},#{mgr},#{hireDate})

</insert>

</mapper>

三、项目目录树截图

使用easyUI datagrid分页

四、实现效果图

使用easyUI datagrid分页

使用easyUI datagrid分页

使用easyUI datagrid分页

一、使用easyUI datagrid分页注意事项及原理：

（一）jsp页面

(二) 在定义的action中

（三）dao中自定义的方法

（四）mapper映射文件

三、项目目录树截图

四、实现效果图

相关推荐