分页查询easy UI

keyidddd

浏览: 2417 次
性别:
来自: 大连

最近访客更多访客>>

wzm1994

woodding2008

lzfstruggle

tonney

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

框架整合案例

//这里假定了解servlet的web.xml的配置，这里不再赘述

//关于spring mvc、mybatis、spring怎么整合及整合要配置什么文件，怎么配置也省略

//本人数据库用的是mysql，开发工具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层

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、测试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>();
		
		//这儿写死是为了测试userMapper中的分页是否好用
		map.put("pageNumRow", 0);
		map.put("pageRow", 3);
		List<User> users = mapper.userLimit(map);
		for (User user : users) {
			System.out.println(user);
		}
 
	}
	
}

4、Service层

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层

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) {//接收从前台传递的两个参数row,page(字段名不可变)
		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;//向前台传递了一个map集合，这里有些疑惑，必须是map集合么？
 
	}
}

6.JSP datagrid 页面

<%@ 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>员工列表</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

分享到：

SVN 版本控制安装

2016-03-13 22:44
浏览 635
评论(0)
分类:行业应用
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

分页查询easy UI

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

分页查询easy UI

评论

发表评论

相关推荐

分页查询（easy UI、springMVC、mybatis）

最近访客更多访客>>