easyui官方demo查看数据请求规则
http://www.jeasyui.com/tutorial/datagrid/datagrid2_demo.html
编写用户分页接口
在com.xbb.springboot.tutorial.web.UserController添加分页接口
@RequestMapping("pageUser")
@ResponseBody
public Map<String, Object> pageUser(int page,int rows){
Page<User> pageInfo = new Page<>();
pageInfo.setCurrent(page);
pageInfo.setSize(10);
QueryWrapper<User> qw = new QueryWrapper<>();
pageInfo = userService.page(pageInfo, qw);
Map<String, Object> result = new HashMap<>();
result.put("total", pageInfo.getTotal());
result.put("rows", pageInfo.getRecords());
return result;
}
编写用户界面
在templates目录下创建user目录和user.html
image.png
html中内容如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>管理员信息管理</title>
<link rel="stylesheet" type="text/css" href="${ctx.contextPath}/js/jquery-easyui-1.9.7/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${ctx.contextPath}/js/jquery-easyui-1.9.7/themes/icon.css">
<link rel="stylesheet" type="text/css" href="${ctx.contextPath}/js/jquery-easyui-1.9.7/demo/demo.css">
<script type="text/javascript" src="${ctx.contextPath}/js/jquery-easyui-1.9.7/jquery.min.js"></script>
<script type="text/javascript" src="${ctx.contextPath}/js/jquery-easyui-1.9.7/jquery.easyui.min.js"></script>
</head>
<body>
<table id="userGrid"></table>
</body>
<script type="text/javascript" src="${ctx.contextPath}/js/user/user.js"></script>
</html>
在static目录下创建user文件夹和user.js
image.png
内容如下:
$('#userGrid').datagrid({
url: '/user/pageUser',
pagePosition:'bottom',
pagination: true,
singleSelect: true,
fitColumns: true,
toolbar: '#userGridToolBar',
idField: "id",
loadMsg: "正在努力为您加载数据",
fit: true,
rownumbers:true,
nowrap: true,
columns:[[
{field:'username',title:'用户名',width:100},
{field:'password',title:'密码',width:100},
{field:'birthday',title:'出生日期',width:100}
]]
});
在ViewController中添加如下方法映射访问user.html
@RequestMapping(value = "/{path1}/{path2}")
public String view2(@PathVariable("path1")String path1,@PathVariable("path2")String path2) {
return path1 + "/" + path2;
}
