EasyUI 数据表格（DataGrid）——第二节

使用SSM+DataGrid实现数据表格的展示，分页，排序功能

数据库设计：

Mapper文件

<?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="com.ooyhao.dao.UserMapper">

    <select id="findAllUsers" resultType="User">
        select * from tb_user order by ${sort} ${order} limit #{start} ,#{rows};
    </select>

    <select id="findCount" resultType="Integer">
        select count(*) from tb_user;
    </select>

</mapper>

DAO：

package com.ooyhao.dao;

import com.ooyhao.pojo.User;
import org.apache.ibatis.annotations.Param;

import java.util.List;

/**
 * @author ooyhao
 */
public interface UserMapper {

    public List<User> findAllUsers(@Param("start") Integer start, @Param("rows") Integer rows,@Param("sort") String sort,@Param("order") String order);

    public Integer findCount();
}

Service And ServiceImpl

package com.ooyhao.service;

import com.ooyhao.dao.UserMapper;
import com.ooyhao.pojo.User;
import org.springframework.beans.factory.annotation.Autowired;

import java.util.List;

/**
 * @author ooyhao
 */
public interface UserService {

    //分页获得用户列表
    public List<User> findAllUsers(Integer page,Integer rows,String sort, String order);
    //获得用户总记录数
    public Integer findCount();
}




package com.ooyhao.service;

import com.ooyhao.dao.UserMapper;
import com.ooyhao.pojo.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

/**
 * @author ooyhao
 */
@Service
public class UserServiceImpl implements UserService {


    @Autowired
    private UserMapper userMapper;

    @Override
    public List<User> findAllUsers(Integer page, Integer rows, String sort, String order) {
        return userMapper.findAllUsers((page-1)*rows,rows,sort,order);
    }

    @Override
    public Integer findCount() {
        return userMapper.findCount();
    }
}

POJO类

package com.ooyhao.pojo;

import java.io.Serializable;
import java.util.Date;

/**
 * @author ooyhao
 */
public class User implements Serializable {
    //id
    private Integer id;
    //用户名
    private String user;
    //邮箱
    private String email;
    //日期
    private Date date;

    public User() {
    }

    public User(Integer id, String user, String email, Date date) {
        this.id = id;
        this.user = user;
        this.email = email;
        this.date = date;
    }

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getUser() {
        return user;
    }

    public void setUser(String user) {
        this.user = user;
    }

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }

    public Date getDate() {
        return date;
    }

    public void setDate(Date date) {
        this.date = date;
    }

    @Override
    public String toString() {
        return "User{" +
                "id=" + id +
                ", user='" + user + '\'' +
                ", email='" + email + '\'' +
                ", date=" + date +
                '}';
    }
}

DataGridVo类

package com.ooyhao.EasyUIVo;

import java.util.List;
import java.util.Map;

/**
 * @author ooyhao
 */
public class DataGridVo<T> {

    //总记录数
    private Integer total;
    //每一页的数据
    private List<T> rows;
    //表脚显示的数据
    private Map<String,Object> footer;

    public DataGridVo() {
    }

    public DataGridVo(Integer total, List<T> rows, Map<String, Object> footer) {
        this.total = total;
        this.rows = rows;
        this.footer = footer;
    }

    public Integer getTotal() {
        return total;
    }

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

    public List<T> getRows() {
        return rows;
    }

    public void setRows(List<T> rows) {
        this.rows = rows;
    }

    public Map<String, Object> getFooter() {
        return footer;
    }

    public void setFooter(Map<String, Object> footer) {
        this.footer = footer;
    }

    @Override
    public String toString() {
        return "DataGridVo{" +
                "total=" + total +
                ", rows=" + rows +
                ", footer=" + footer +
                '}';
    }
}

Controller类

package com.ooyhao.controller;

import com.ooyhao.EasyUIVo.DataGridVo;
import com.ooyhao.pojo.User;
import com.ooyhao.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import java.util.List;

/**
 * @author ooyhao
 */
@Controller
public class UserController {

    @Autowired
    private UserService userService;


    @RequestMapping("/init")
    public String init(String username, String password, Model model){
        model.addAttribute("message",
                "username:"+username+", password:"+password);
        return "message";
    }

    @RequestMapping("/initDataGrid")
    public String initDataGrid(){
        return "DataGrid";
    }
    @RequestMapping("/initDataGrid2")
    public String initDataGrid2(){
        return "DataGrid2";
    }

    @RequestMapping("/getDataGridList")
    @ResponseBody
    public DataGridVo<User> getDataGridList(Integer page, Integer rows,String sort, String order){
        DataGridVo<User> dataGridVo = new DataGridVo<User>();
        dataGridVo.setTotal(userService.findCount());
        List<User> users = userService.findAllUsers(page,rows,sort,order);
        dataGridVo.setRows(users);
        dataGridVo.setFooter(null);
        return dataGridVo;
    }

}

jsp文件

<%--
  Created by IntelliJ IDEA.
  User: ooyhao
  Date: 2018/7/29 0029
  Time: 9:21
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>DataGrid数据表格</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/color.css">
    <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/DataGrid2.js"></script>
</head>
<body>
    <table id="box"></table>
</body>
</html>

JS文件

$(function () {
    $("#box").datagrid({
        //设置请求路径
        url:"getDataGridList.action",
        //设置表格宽度
        width: 500,
        //设置请求方式
        type: "GET",
        //设置表头图标
        iconCls:"icon-search",
        //设置表头标题
        title:"EasyUI数据表格",
        //设置是否显示行号
        rownumbers:true,
        //设置是否分页
        pagination:true,
        //设置分页时初始化页数
        pageNumber:1,
        //设置每页显示的条数
        pageSize:5,
        //设置显示条数的下拉列表
        pageList:[5,10,20],
        //设置是否远程加载进行排序
        remoteSort : false,
        //设置默认排序的名称
        sortName : "date",
        //设置默认排序的方式
        sortOrder : "asc",
        //设置分页导航的位置
        pagePosition:"bottom",
        //设置列适应
        fitColumns : true,
        //设置表格中的列
        columns: [[
            {
                //每一列的名字
                title: "用户名",
                //数据中的字段名（数据库中的字段名）
                field: "user",
                //每一列的宽度
                width: 100
            }, {
                title: "邮箱",
                field: "email",
                width: 100,
                sortable:true,
                order:"desc",
            },{
                title:"日期",
                field:"date",
                width:100,
                sortable:true,
                order:"desc",
                //进行了日期的格式化
                formatter:function (value,row,index) {
                    var time = row.date;
                    var date = new Date(time);
                    return date.getFullYear()+"年"+(date.getMonth()+1)+" 月"+date.getDate()+" 日";
                }
            }
        ]],
        /*data:[
            {
                user:"贾宝玉",
                email:"[email protected]",
                date:"1996-01-01"
            },{
                user:"林黛玉",
                email:"[email protected]",
                date:"1996-01-02"
            },{
                user:"薛宝钗",
                email:"[email protected]",
                date:"1996-01-03"
            },{
                user:"贾惜春",
                email:"[email protected]",
                date:"1996-01-04"
            },{
                user:"袭人",
                email:"[email protected]",
                date:"1996-01-05"
            },{
                user:"贾迎春",
                email:"[email protected]",
                date:"1996-01-06"
            }
        ]*/
    });
});

效果图

------------------------------------------------

关注小编微信公众号获取更多资源