前面一节 我们已经实现博客类别的dao层的实现，其中特别讲解了博客类别的分页的实现，那么现在我们实现了后台的分页，那么前台分页怎么显示呢，这时候我们用到了easyui的datagrid了。
先上一下效果图

分页结果

1、数据格式准备工作

首先我们要知道datagrid解析的是什么样的数据。在我们jquery-easyui-1.3.5/demo/datagrid/datagrid_data1.json

datagrid_data1.json

从图中我们可以看出来
这是一个接送对象，其中
total：代表的是总记录数目
rows：每条记录的数组
这就意味着我们后台返回的数据是一个json对象
里面有两个字段分别是total跟rows
前面我们已经在dao分别定义了并实现了如下方法

/**
* 分页查询博客类别信息
* @param start
* @param end
* @return
*/
List<BlogType> listByPage(@Param("start") Integer start, @Param("end") Integer end);

/**
* 查询总记录数
* @return
*/
Long getTotal();

[/code]

那么只要我们把这个两个方法查询的数据json序列化返回跟前台就可以了，到这里我们需要做一些业务处理，把一些业务逻辑方法service层里面。

2、业务层实现

由于分页处理我们使用的字段很多例如
currPage:当前页数
pageSize:每页显示数目
total:总记录数目
result:分页查询结果，
由于字段很多所以我们直接把它封装成类PageBan 由于不仅仅是博客类别需要分页 博客也要分页 所以我们把这个PageBean设置为泛型
PageBean<T>

package ssm.blog.entity;

import java.util.List;

/**
* Created by xp on 2017/4/14.
*/
public class PageBean<T> {

private int currPage;   //当前页数
private int pageSize;   //每页显示的个数
private long total;      //总记录数
private int start;
private int end;
private List<T> result; //分页查询的结果

PageBean(){

}

public PageBean(int currPage, int pageSize) {
this.currPage = currPage;
this.pageSize = pageSize;
this.start = (currPage-1)*pageSize;
this.end = currPage*pageSize;
}

public int getCurrPage() {
return currPage;
}

public void setCurrPage(int currPage) {
this.currPage = currPage;
}

public int getPageSize() {
return pageSize;
}

public void setPageSize(int pageSize) {
this.pageSize = pageSize;
}

public long getTotal() {
return total;
}

public void setTotal(long total) {
this.total = total;
}

public List<T> getResult() {
return result;
}

public void setResult(List<T> result) {
this.result = result;
}

public int getStart() {
return start;
}

public void setStart(int start) {
this.start = start;
}

public int getEnd() {
return end;
}

public void setEnd(int end) {
this.end = end;
}

@Override
public String toString() {
return "PageBean{" +
"currPage=" + currPage +
", pageSize=" + pageSize +
", total=" + total +
", start=" + start +
", end=" + end +
", result=" + result +
'}';
}
}

[/code]

其中我们在构造方法public PageBean(int currPage, int pageSize)
中初始化了start 与end这样我们下次直接get就可以了

新建接口 BlogTypeService

package ssm.blog.service;

import org.springframework.stereotype.Service;
import ssm.blog.entity.BlogType;
import ssm.blog.entity.PageBean;

/**
* Created by xp on 2017/4/14.
* @author xp
* @Description 博客类别service接口
*/
public interface BlogTypeService {

//分页查询
PageBean<BlogType> listByPage(PageBean<BlogType> pageBean);

}

[/code]

写出对应的实现类

package ssm.blog.service.impl;

import org.springframework.stereotype.Service;
import ssm.blog.dao.BlogTypeDao;
import ssm.blog.entity.BlogType;
import ssm.blog.entity.PageBean;
import ssm.blog.service.BlogTypeService;

import javax.annotation.Resource;

/**
* Created by xp on 2017/4/14.
* @author xp
* @Description 博客类别service接口实现类
*/
@Service
public class BlogTypeServiceImpl implements BlogTypeService{

@Resource
private BlogTypeDao blogTypeDao;

public PageBean<BlogType> listByPage(PageBean<BlogType> pageBean) {
//查询分页结果
pageBean.setResult(blogTypeDao.listByPage(pageBean.getStart(),pageBean.getEnd()));
//查询记录总数
pageBean.setTotal(blogTypeDao.getTotal());
return pageBean;
}
}

[/code]

3、控制层实现

由于我们使用的datagrid 当前我们点击下一页看看请求的参数

Paste_Image.png

从图中可以看出来请求的有两个参数
page:当前页数
rows:每页显示的数目

所以我们的控制器就要接受请求的参数
这样我们就可以使用@RequestParam注解来接受前台的传来的参数
因为datagrid需要的是json数据 所以这里我们需要将 对象序列化
这里我使用的是阿里巴巴的fastjson
在pom添加相关依赖

<!-- 阿里巴巴json序列化工具-->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.7</version>
</dependency>

在ssm.blog.controller.admin包下新建BlogTypeController
具体的代码如下

package ssm.blog.controller.admin;

import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONArray;
import com.alibaba.fastjson.JSONObject;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import ssm.blog.entity.BlogType;
import ssm.blog.entity.PageBean;
import ssm.blog.service.BlogService;
import ssm.blog.service.BlogTypeService;
import ssm.blog.util.ResponseUtil;

import javax.annotation.Resource;
import javax.servlet.http.HttpServletResponse;

/**
* Created by xp on 2017/4/14.
* @author xp
* @Description 博客分类控制器
*/
@Controller
@RequestMapping(value = "/admin/blogType")
public class BlogTypeController {

@Resource
private BlogTypeService blogTypeService;

// 分页查询博客类别
@RequestMapping("/list")
public String listBlogType(
@RequestParam(value = "page", required = false) String page,
@RequestParam(value = "rows", required = false) String rows,
HttpServletResponse response) throws Exception {
//定义分页bean
PageBean<BlogType> pageBean = new PageBean<BlogType>(Integer.parseInt(page)
,Integer.parseInt(rows));
//拿到分页结果已经记录总数的pageBean
pageBean = blogTypeService.listByPage(pageBean);
//使用阿里巴巴的fastJson创建JSONObject
JSONObject result = new JSONObject();
//通过fastJson序列化list为jsonArray
String jsonArray = JSON.toJSONString(pageBean.getResult());
JSONArray array = JSONArray.parseArray(jsonArray);
//将序列化结果放入json对象中
result.put("rows", array);
result.put("total", pageBean.getTotal());

//使用自定义工具类向response中写入数据
ResponseUtil.write(response, result);
return null;
}
}

[/code]

部分注解解释

其中@Controller代表这是一个控制器bean
@RequestMapping(value = "/admin/blogType") 类级别的请求路径 我们使用admin代表这是后台管理blogType代表管理博客类别
@RequestMapping("/list")就是请求这个分页方法的路径

fastjson序列化

第一步 创建 JSONObject result = new JSONObject();
第二步 使用 JSON.toJSONString方法将List对象序列化成json字符串
第三步 将json字符串转成JSONArray对象
第四步 将数据put进result中
第五步 将result方法

如何将json返回

第一步获取response对象
在SpringMVC中我们可以直接在方法形参中添加HttpServletResponse response即可
第二步拿到response的文本输出流对象 既
PrintWriter pw = response.getWriter();
第三步将我们需要返回的json对象写入response中
pw.println(obj.toString());
第四部关闭刷新输出流并且关闭
pw.flush();
pw.close();
因为我们可能在其他的方法也需要返回json对象 所以我们将这个流程封装成一个静态方法放在工具类中

在ssm.blog.util包中新建ResponseUtil类
代码如下

package ssm.blog.util;

import javax.servlet.http.HttpServletResponse;
import java.io.PrintWriter;

/**
* Created by xp on 2017/4/14.
*/
public class ResponseUtil {
/**
* 向response对象写入数据
* @param response
* @param obj
* @throws Exception
*/
public static void write(HttpServletResponse response, Object obj)throws Exception{
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
out.println(obj.toString());
out.flush();
out.close();
}
}

[/code]

接下来我们可以测试后台返回数据格式是否满足我们的要求
在这里我们使用Postman测试 url

http://localhost:8080/admin/blogType/list.do?page=1&rows=5

结果如图

请求结果

结果与前面datagrid_data1.json格式一致满足我们的要求

4、前端视图处理

在webapp目录下面的admin目录下面新建blogTypeManage.jsp

打开easyUI API手册 搜索datagrid

datagrid

从图中可以看出来datagrid本质就是table
有两种方法可以创建datagrid 在这里我们先使用js动态创建datagrid
先贴上代码

<%--
Created by IntelliJ IDEA.
User: xp
Date: 2017/4/14
Time: 08:34
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!doctype html>
<html lang="en">
<head>
<title>博客类别管理</title>
<%@include file="../common/head.jspf" %>
</head>
<script>
$(function () {
//datagrid初始化
$('#dg').datagrid({
//请求数据的url
url: '${blog}/admin/blogType/list.do',
//载入提示信息
loadMsg: 'loading...',
//水平自动展开，如果设置此属性，则不会有水平滚动条，演示冻结列时，该参数不要设置
fitColumns: true,
//数据多的时候不换行
nowrap: true,
//设置分页
pagination: true,
//设置每页显示的记录数，默认是10个
pageSize: 5,
//每页显示记录数项目
pageList: [5, 10, 15, 20],
//指定id为标识字段，在删除，更新的时候有用，如果配置此字段，在翻页时，换页不会影响选中的项
idField: 'id',
//上方工具条 添加 修改 删除 刷新按钮
toolbar:[{
iconCls: 'icon-add',    //图标
text: '添加',            //名称
handler: function () {  //回调函数
alert("添加");
}
},'-',{
iconCls: 'icon-edit',
text: '修改',
handler: function () {
alert("添加");
}
},'-',{
iconCls: 'icon-edit',
text: '删除',
handler: function () {
alert("删除");
}
},'-',{
iconCls: 'icon-reload',
text: '刷新',
handler: function () {
alert("刷新");
}
}],
//同列属性，但是这些列将会冻结在左侧,z大小不会改变，当宽度大于250时，会显示滚动条，但是冻结的列不在滚动条内
frozenColumns:[[
{field:'checkbox',checkbox:true},    //复选框
{field:'id',title:'编号',width:200}    //id字段
]],
columns:[[
{field:'typeName',title:'博客分类名称',width:300},   //typeName 字段
{field:'orderNum',title:'博客类别排序',width:300},   //orderNum 字段
]],
});
});
</script>
<body>
<table id="dg"></table>
</body>
</html>

[/code]

从面上面代码看出来我们只需声明一个table接下我只需要通过js就能动态创建datagrid 代码中的注解比较详细我就不在多说了
接下来只需把我们的blogTypeManage.jsp与我们main.jsp关联就可以

Paste_Image.png

这样我们重启tomcat 进入主界面 在左侧点击博客类别管理
结果如图

分页结果

转载于:https://my.oschina.net/u/3486331/blog/901535

• 点赞
• 收藏
• 分享
• 文章举报

choubo9488 发布了0 篇原创文章 · 获赞 0 · 访问量 100 私信 关注