//It is assumed here that you understand the configuration of web.xml of servlet, which will not be repeated here.
//About how to integrate spring mvc, mybatis, spring and what files to configure for integration, how to configure is also omitted
//My database is mysql, the development tool is window+eclipse
1、userMapper.xml(mybatis)
<?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" >
<mapper namespace="demo.mapper.UserLimitMapper">
<select id="userLimit" parameterType="map" resultType="demo.model.User">
select * from cn_user limit #{pageNumRow},#{pageRow}
</select>
<select id="userCount" resultType="int">
select count(*) from cn_user
</select>
</mapper>
2, Dao layers
package demo.mapper;
import java.util.List;
import java.util.Map;
import demo.model.User;
public interface UserLimitMapper {
public List<User> userLimit(Map map);
public int userCount();
}
3. Test Dao
package demo.UserTest;
import java.util.HashMap;
import java.util.Iterator;
import java.util.List;
import java.util.Map;
import javax.sql.DataSource;
import org.junit.Test;
import org.springframework.context.ApplicationContext;
import org.springframework.context.support.ClassPathXmlApplicationContext;
import demo.mapper.UserLimitMapper;
import demo.model.User;
public class AppTest {
@Test
public void test1() {
String str = "spring/spring-core.xml";
ApplicationContext ap = new ClassPathXmlApplicationContext(str);
UserLimitMapper mapper = ap.getBean("userLimitMapper", UserLimitMapper.class);
int a=mapper.userCount();
System.out.println(a);
Map<String, Object> map = new HashMap<String, Object>();
//The purpose of writing dead here is to test whether the paging in userMapper is easy to use
map.put("pageNumRow", 0);
map.put("pageRow", 3);
List<User> users = mapper.userLimit(map);
for (User user : users) {
System.out.println(user);
}
}
}
4. Service layer
package demo.service;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import demo.mapper.UserLimitMapper;
import demo.model.User;
@Service
public class UserService {
@Autowired
private UserLimitMapper mapper;
public int userCountService(){
return mapper.userCount();
}
public List<User> UserLimitService(int row,int page){
Map<String, Object> map = new HashMap<String, Object>();
int pageNumRow =(page-1)*row;
map.put("pageNumRow", pageNumRow);
map.put("pageRow", row);
return mapper.userLimit(map);
}
}
5. Controller layer
package demo.controler;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import demo.model.User;
import demo.service.UserService;
@Controller
@RequestMapping(value = "/src")
public class UserController {
@Autowired
private UserService service;
@RequestMapping(value = "/user.do")
@ResponseBody
public Map<String, Object> controller(int page, int rows) {//Receive two parameters row, page passed from the front desk (the field name is immutable)
List<User> list = service.UserLimitService(rows, page);
Map<String, Object> map = new HashMap<>();
int totalrows = service.userCountService();
map.put("total", totalrows);
map.put("rows", list);
return map;//A map collection is passed to the front desk, there are some doubts here, must it be a map collection?
}
}
6. JSP datagrid page
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!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>Employee List</title> <link rel="stylesheet" type="text/css" href="themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="themes/icon.css"> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery.easyui.min.js"></script> </head> <body> <table class="easyui-datagrid" style="width: 100%; height: 800px" data-options="url:'<%=request.getContextPath()%>/src/user.do',fitColumns:true,singleSelect:true,rownumbers:true,pagination:true"> <thead> <tr> <th data-options="field:'cn_user_id',width:100">id</th><!--field属性为实体类字段名 --> <th data-options="field:'cn_user_name',width:100">name</th> <th data-options="field:'cn_user_password',width:100">password</th> <th data-options="field:'cn_user_token',width:100">token</th> <th data-options="field:'cn_user_desc',width:100">desc</th> </tr> </thead> </table> </body> </html>
7.总结
easy UI 中datagrid依赖关系为
panel、resizable、linkbutton、pagination
pagination组件中的按钮会触发事件，发送ajax请求，向后台传递两个参数
page:1;rows:10
所以在Controller要接收参数并返回map，通过@ResponseBody 标签向前台页面传递json对象
{total: 11, rows: [,…]}
rows: [,…]
0: {cn_user_id: "03590914-a934-4da9-ba4d-b41799f917d1", cn_user_name: "zhouj", cn_user_password: "123456"}
1: {cn_user_id: "2273f742-61ec-4440-b88a-42cf48db19ff", cn_user_name: "zhoujia123",…}
2: {cn_user_id: "333c6d0b-e4a2-4596-9902-a5d98c2f665a", cn_user_name: "test1", cn_user_password: "123456"}
3: {cn_user_id: "39295a3d-cc9b-42b4-b206-a2e7fab7e77c", cn_user_name: "zhoujia",…}
4: {cn_user_id: "48595f52-b22c-4485-9244-f4004255b972", cn_user_name: "demo", cn_user_password: "123456"}
5: {cn_user_id: "524f7440-7283-4b2d-8af5-4a67570e892e", cn_user_name: "pc", cn_user_password: "123456"}
6: {cn_user_id: "52f9b276-38ee-447f-a3aa-0d54e7a736e4", cn_user_name: "wsf", cn_user_password: "123456"}
7: {cn_user_id: "6f339f0a-2068-4db1-8fef-8e68f444c72c", cn_user_name: "saipi", cn_user_password: "123456"}
8: {cn_user_id: "974375a8-8557-4308-bd36-9455c7863239", cn_user_name: "zhoujia1231",…}
9: {cn_user_id: "bf9d2885-f34e-4c78-9ae5-2723f62aa2b5", cn_user_name: "saipi", cn_user_password: "123456"}
total: 11