文档章节

【ssm个人博客项目实战05】easy ui datagrid实现数据的分页显示

YuKongA
 YuKongA
发布于 2017/05/16 09:17
字数 2077
阅读 74
收藏 1

前面一节 我们已经实现博客类别的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();

那么只要我们把这个两个方法查询的数据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 +
                '}';
    }
}

其中我们在构造方法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);


}

写出对应的实现类

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;
    }
}

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;
    }
}

部分注解解释

其中@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();
    }
}

接下来我们可以测试后台返回数据格式是否满足我们的要求
在这里我们使用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>

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


Paste_Image.png


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


分页结果

© 著作权归作者所有

共有 人打赏支持
YuKongA
粉丝 6
博文 10
码字总数 15504
作品 0
ASP.NET中利用DataGrid的自定义分页功能和存储过程结合实现高效分页

关键字:DataGrid、存储过程、分页 出自:http://blog.csdn.net/yzx110/archive/2004/08/18/78525.aspx 摘要:在最进的一个项目中因为一个管理页面要管理的数据量非常大,所以必须分页显示,并...

晨曦之光
2012/03/09
48
0
【我们一起写框架】MVVM的WPF框架(四)—DataGrid

前言 这个框架写到这里,应该有很多同学发现,框架很多地方的细节,其实是违背了MVVM的设计逻辑的。 没错,它的确是违背了。 但为什么明知道违背设计逻辑,还要这样编写框架呢? 那是因为,我...

kiba518
10/11
0
0
Eova 1.2 正式版,Java Web 快速开发平台

Eova的能量,超乎你的想象,你的思想有多远,Eova就能陪你走多远! --------------------------------------------------------------- [新增]Eova演示功能 [新增]Grid右键导出所有数据为Exc...

Jieven
2015/06/10
11.7K
48
JEECG Framework 3.4.1 beta 版本发布

JEECG简介: JEECG(J2EE Code Generation)是一款基于代码生成器的智能开发平台,代码生成 + Online Coding在线开发,可以帮助解决Java项目80%的重复工作,让开发更多关注业务逻辑。既能快速...

Jeecg
2013/11/18
2.4K
3
Datalist控件,Repeater控件如何分页?

Asp.net提供了三个功能强大的列表控件:DataGrid、DataList和Repeater控件,但其中只有DataGrid控件提供分页功能。相对DataGrid,DataList和Repeater控件具有更高的样式自定义性,所以很多时...

晨曦之光
2012/03/09
110
0

没有更多内容

加载失败,请刷新页面

加载更多

linux 系统的运行级别

运行级别 运行级别 | 含义 0 关机 1 单用户模式,可以想象为windows 的安全模式,主要用于修复系统 2 不完全的命令模式,不含NFS服务 3 完全的命令行模式,就是标准的字符界面 4 系统保留 5 ...

Linux学习笔记
34分钟前
0
0
学习设计模式——命令模式

任何模式的出现,都是为了解决一些特定的场景的耦合问题,以达到对修改封闭,对扩展开放的效果。命令模式也不例外: 命令模式是为了解决命令的请求者和命令的实现者之间的耦合关系。 解决了这...

江左煤郎
42分钟前
2
0
字典树收集(非线程安全,后续做线程安全改进)

将500W个单词放进一个数据结构进行存储,然后进行快速比对,判断一个单词是不是这个500W单词之中的;来了一个单词前缀,给出500w个单词中有多少个单词是该前缀. 1、这个需求首先需要设计好数据结...

算法之名
昨天
10
0
GRASP设计模式

此文参考了这篇博客,建议读者阅读原文。 面向对象(Object-Oriented,OO)是当下软件开发的主流方法。在OO分析与设计中,我们首先从问题领域中抽象出领域模型,在领域模型中以适当的粒度归纳...

克虏伯
昨天
0
0
Coding and Paper Letter(四十)

资源整理。 1 Coding: 1.Tomislav Hengl撰写的非官方作者指南:Michael Gould•Wouter Gerritsma。 UnofficialGuide4Authors 2.R语言包rwrfhydro,社区贡献的工具箱,用于管理,分析和可视化...

胖胖雕
昨天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部