java easyui分页源码_SpringMVC结合easyUI中datagird实现分页

SpringMVC结合easyUI中datagird实现分页

DataGrid以表格形式展示数据，并提供了丰富的选择、排序、分组和编辑数据的功能支持。轻量级，单元格合并、多列标题、冻结列和页脚只是其中一小部分功能。

一、提前

1、SpringMVC注解@RequestMapping(value = "/listUser.htm"),返回值ModelView，解析返回一页面。 注解@ResponseBody用于返回一个模型对象(数据结构)，如JSONObject,自定义DataGrid…… 等等。

2、需要引入相应的js和css,这是利用

引入文件

datagrid中以及其他easyui元素文字默认都是英文，如果换成中文引入easyui-lang-zh_CN.js

3、加载DataGrid时，回台接收page=1$rows=10的参数数据，可以通过request.getParamter()函数获取参数，也可以定义到函数参数中，如下图：

@RequestMapping(value = "/queryListUser.json")

@ResponseBodypublicDataGrid quyerListUser(HttpServletRequest request,

HttpServletResponse response,int page, introws) {

}

二、DataGrid简述及实现

下面为一种方法定义datagrid,在js中声名，也可以在table节点中定义。

$('#userGrid').datagrid({

loadMsg :'数据加载中....',

title :"管理员信息一览表",

url :'/queryListUser.json',

method :'POST',

queryParams : {'params': JSON.stringify(params)

},

striped :true, //设置为true将交替显示行背景。相邻行不同颜色//fit:false,//自适应大小//fitColumns:true,//列宽适应浏览器,无左右滚动条

rownumbers : true,//行number

pagination : true,//显示页码

pageSize : 10,//初始化每页显示的条数

pageList : [ 10, 20, 50, 100 ],//可以调节的每页显示条数

columns : [ [ {

field :'ck',

width : fixWidth(0.05),

checkbox :true}, {

field :'username',

title :'用户名',

width :300,

sortable :true,

align :'center'}, {

field :'password',

title :'密码',

width :100,

sortable :true,

align :'center'}, {

field :'usertype',

title :'类型',

width :300,

sortable :true,

align :'center',

formatter : typeColumnsFormatter

}, {

field :'createtime',

title :'创建时间',

width :100,

sortable :true,

align :'center',

formatter : timeColumnsFormatter

} ] ],

sortOrder :"desc",

sortName :"createtime", //初始化时按Id升序排序

toolbar : [ {

iconCls :'icon-add',

text :'添加',

handler : function() {

alert('Add')

}

},'-', { //分隔符

iconCls : 'icon-edit',

text :'编辑',

handler : function() {

alert('edit')

}

},'-', {

iconCls :'icon-remove',

text :'删除',

handler : function() {

alert('delete')

}

},'-', {

iconCls :'icon-search',

text :'查询',

handler : function() {

}

} ]

});

DataGrid

注意：pageSize : 10,//初始化每页显示的条数，不起作用， jquey easyui 版本问题， 统一修改为1.5的版本。

针对其属性可以找api文档进行了解。

三、后台实现

1、通过传递前台page,rows,sort,order，后台拼接sql语句进行数据的分页、排序。每次下一页、上一页等操作都会传递后台这些参数；

/*** shopUser分页查询

*

*@paramrequest

*@paramresponse

*@parampage

* 页码 参数传递或者getParameter()

*@paramrows

* 每页的大小(条数)

*@return

*/@RequestMapping(value= "/queryListUser.json")

@ResponseBodypublicDataGrid quyerListUser(HttpServletRequest request,

HttpServletResponse response,int page, introws) {

String paramsObj= request.getParameter("params");

String sort= request.getParameter("sort");//默认排序列名称

String order = request.getParameter("order");//排序方式

JSONObject paramsJson =JSONObject.fromObject(paramsObj);int start = (page - 1) * rows; //limit 开始位置

int nums = rows; //limit 查询数量

paramsJson.put("start", start);

paramsJson.put("nums", nums);if(StringUtils.isNotBlank(sort)){

paramsJson.put("sortName", sort);

}else{

paramsJson.put("sortName", "userid");

}if(StringUtils.isNotBlank(order)){

paramsJson.put("sortOrder", order);

}else{

paramsJson.put("sortOrder", "asc");

}

List shopUsers = new ArrayList();int total =rows;try{

shopUsers=shopUserService.quyeryShopUserWithPage(paramsJson);

total=shopUserService.quyerForCount(paramsJson);

}catch(Exception e) {

e.printStackTrace();return null;

}if (shopUsers != null && shopUsers.size() > 0) {

}

DataGrid dataGrid= newDataGrid();

dataGrid.setRows(shopUsers);

dataGrid.setTotal(total);returndataGrid;

}

queryList

返回值shopUsers为数据对象，和total查询数量；返回到前台展示页码和条数。

2、这里我使用的MyBatis+Mysql,通过limit实现查询分页

@Repository(value="shopUserMapper")public interfaceShopUserMapper {intdeleteByPrimaryKey(Integer userid);intinsert(ShopUser record);//选择性新增

intinsertSelective(ShopUser record);

ShopUser selectByPrimaryKey(Integer userid);

ListselectByName(String name);intupdateByPrimaryKeySelective(ShopUser record);intupdateByPrimaryKey(ShopUser record);

ListqueryWithPage(JSONObject jsonObject);intqueryForCount(JSONObject paramsJson);

}

ShopUserMapper.java

userid, username, password, usertype, createtime

selectfrom shop_user

and userid= #{userid,jdbcType=INTEGER}

and username= #{username,jdbcType=VARCHAR}

and LEFT(createtime,8) >= DATE_FORMAT(#{subStartTime},'%Y%m%d')

and LEFT(createtime,8) <= DATE_FORMAT(#{subEndTime},'%Y%m%d')order by ${sortName} ${sortOrder}

limit #{start,jdbcType=INTEGER},#{nums,jdbcType=INTEGER}

select count(1) as counts from shop_user

and userid= #{userid,jdbcType=INTEGER}

and username= #{username,jdbcType=VARCHAR}

selectfrom shop_user

where userid= #{userid,jdbcType=INTEGER}

selectfrom shop_user

where username= #{username,jdbcType=VARCHAR}

delete from shop_user

where userid= #{userid,jdbcType=INTEGER}

insert into shop_user (userid, username, password,

usertype, createtime)

values (#{userid,jdbcType=INTEGER}, #{username,jdbcType=VARCHAR},

#{password,jdbcType=VARCHAR},

#{usertype,jdbcType=INTEGER}, #{createtime,jdbcType=BIGINT})

select LAST_INSERT_ID()insert into shop_user

username,

password,

usertype,

createtime,

#{username,jdbcType=VARCHAR},

#{password,jdbcType=VARCHAR},

#{usertype,jdbcType=INTEGER},

#{createtime,jdbcType=BIGINT},

update shop_user

username= #{username,jdbcType=VARCHAR},

password= #{password,jdbcType=VARCHAR},

usertype= #{usertype,jdbcType=INTEGER},

createtime= #{createtime,jdbcType=BIGINT},

where userid= #{userid,jdbcType=INTEGER}

update shop_user

set username= #{username,jdbcType=VARCHAR},

password= #{password,jdbcType=VARCHAR},

usertype= #{usertype,jdbcType=INTEGER},

createtime= #{createtime,jdbcType=BIGINT}

where userid= #{userid,jdbcType=INTEGER}

ShopUserMapper.xml

具体的mybatis用法，可以自己查看其他博文。