【ssm个人博客项目实战05】easy ui datagrid实现数据的分页显示
来源:互联网 发布:数据挖掘及应用是什么 编辑:程序博客网 时间:2024/05/29 11:00
前面一节 我们已经实现博客类别的dao层的实现,其中特别讲解了博客类别的分页的实现,那么现在我们实现了后台的分页,那么前台分页怎么显示呢,这时候我们用到了easyui的datagrid了。
先上一下效果图
1、数据格式准备工作
首先我们要知道datagrid解析的是什么样的数据。在我们jquery-easyui-1.3.5/demo/datagrid/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
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接口实现类 */@Servicepublic 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 当前我们点击下一页看看请求的参数
从图中可以看出来请求的有两个参数
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
具体的代码如下
“`java
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 {
@Resourceprivate 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类代码如下```javapackage 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(); }}<div class="se-preview-section-delimiter"></div>
接下来我们可以测试后台返回数据格式是否满足我们的要求
在这里我们使用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本质就是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关联就可以
这样我们重启tomcat 进入主界面 在左侧点击博客类别管理
结果如图
- 【ssm个人博客项目实战05】easy ui datagrid实现数据的分页显示
- 【ssm个人博客项目实战08】博客的分页显示以及模糊查询,删除。
- 【ssm个人博客项目实战04】mybatis实现博客类别的增删改查分页
- 【ssm个人博客项目实战02】easy UI搭建后台管理界面
- 【ssm个人博客项目实战07】博客的后台实现
- 【ssm个人博客项目实战06】博客类别的添加修改删除的实现
- SSM个人博客项目实战01
- 【ssm个人博客项目实战01】SSM环境搭建
- easy-ui datagrid 没数据时候显示没有相关数据
- jquery easy ui datagrid 纯后台分页实现
- 【ssm个人博客项目实战03】左侧导航菜单功能实现
- 【SSH网上商城项目实战06】基于DataGrid的数据显示
- 【SSH网上商城项目实战06】基于DataGrid的数据显示
- 【SSH网上商城项目实战06】基于DataGrid的数据显示
- asp.net DataGrid实现分页显示数据
- jQuery easy ui datagrid 无数据时的样式
- Easy UI DataGrid获取指定行指定列的数据
- Easy UI datagrid的学习
- 使用一组点画出平滑的曲线
- 17.4.17 漫画与人脸识别(二) WebCaricature: a benchmark for caricature face recognition 小感
- weterert
- 动态规划 04 (公共子序列)
- 【MFC】 MFC添加控制台Console进行调试
- 【ssm个人博客项目实战05】easy ui datagrid实现数据的分页显示
- 剑指offer 扑克牌顺子
- Web 图片Base64编码
- Exynos4412 uboot2013.1移植B
- Android studio导入Github上的library开源库
- 计算机专用英语词汇1500词
- 设计模式-策略模式
- 最大子矩阵
- SDU 1247 LCA