EasyUI學習-----表格DataGrid前端分頁和後端分頁的總結

時間  2019-12-02
標籤 easyui 學習 表格 datagrid 前端 分頁 後端 總結 简体版
原文   原文鏈接

   Demo簡介

Demo使用Java、Servlet爲後臺代碼(數據庫已添加數據)，前端使用EasyUI框架，後臺直接返回JSON數據給頁面javascript

1.配置Web.xml文件

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns="http://xmlns.jcp.org/xml/ns/javaee"
    xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
    id="WebApp_ID" version="3.1">
    <display-name>easyui_pagination_demo</display-name>
    <welcome-file-list>
        <welcome-file>backend.jsp</welcome-file>
    </welcome-file-list>

    <!-- 前端分頁Servlet -->
    <servlet>
        <servlet-name>studentServletFront</servlet-name>
        <servlet-class>com.servlets.StudentServletFrontEnd</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>studentServletFront</servlet-name>
        <url-pattern>/stuDatagridDataFront.do</url-pattern>
    </servlet-mapping>

    <!-- 後端分頁Servlet -->
    <servlet>
        <servlet-name>studentServletBack</servlet-name>
        <servlet-class>com.servlets.StudentServletBackEnd</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>studentServletBack</servlet-name>
        <url-pattern>/stuDatagridDataBack.do</url-pattern>
    </servlet-mapping>
</web-app>

2.建立實體類Student

package com.models;

/**
 * 學生類
 * 
 * @author yyx 2019年1月8日
 */
public class Student {
    private String stuId;
    private String stuSno;
    private String stuName;
    private Integer stuSex;
    private Integer stuAge;
    private String stuEmail;
    private String stuQQ;
    private String stuAddress;

    public String getStuId() {
        return stuId;
    }

    public void setStuId(String stuId) {
        this.stuId = stuId;
    }

    public String getStuSno() {
        return stuSno;
    }

    public void setStuSno(String stuSno) {
        this.stuSno = stuSno;
    }

    public String getStuName() {
        return stuName;
    }

    public void setStuName(String stuName) {
        this.stuName = stuName;
    }

    public Integer getStuSex() {
        return stuSex;
    }

    public void setStuSex(Integer stuSex) {
        this.stuSex = stuSex;
    }

    public Integer getStuAge() {
        return stuAge;
    }

    public void setStuAge(Integer stuAge) {
        this.stuAge = stuAge;
    }

    public String getStuEmail() {
        return stuEmail;
    }

    public void setStuEmail(String stuEmail) {
        this.stuEmail = stuEmail;
    }

    public String getStuQQ() {
        return stuQQ;
    }

    public void setStuQQ(String stuQQ) {
        this.stuQQ = stuQQ;
    }

    public String getStuAddress() {
        return stuAddress;
    }

    public void setStuAddress(String stuAddress) {
        this.stuAddress = stuAddress;
    }

}
View Code

3.建立工具類

package com.utils;

import java.io.InputStream;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.Properties;

/**
 * 讀取jdbc.properties文件
 * 
 * @author yyx 2019年1月8日
 */
public class JdbcUtil {
    private static String driver;
    private static String url;
    private static String user;
    private static String password;

    private JdbcUtil() {
    }

    static {
        try {
            /**
             * 使用properties集合讀取配置信息
             */
            InputStream inputStream = JdbcUtil.class.getClassLoader().getResourceAsStream("jdbc.properties");
            Properties properties = new Properties();
            properties.load(inputStream);

            driver = properties.getProperty("driver");
            url = properties.getProperty("jdbcUrl");
            user = properties.getProperty("user");
            password = properties.getProperty("password");

            if (driver != null) {
                Class.forName(driver);
            }
        } catch (Exception ex) {
            ex.printStackTrace();
        }
    }

    /**
     * 獲取Connection
     * 
     * @return
     */
    public static Connection getConnection() {
        Connection connection = null;
        try {
            if (url != null && user != null && password != null) {
                connection = DriverManager.getConnection(url, user, password);
                return connection;
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return connection;
    }

    /**
     * 釋放資源 Connection conn, PreparedStatement pst, ResultSet rs
     * 在方法內判斷空
     * @param conn
     * @param pst
     * @param rs
     */
    public static void colseResource(Connection conn, PreparedStatement pst, ResultSet rs) {
        if (conn != null) {
            try {
                conn.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }

        if (pst != null) {
            try {
                pst.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }

        if (rs != null) {
            try {
                rs.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
    }
}
package com.utils;

import java.sql.ResultSet;
import java.sql.ResultSetMetaData;

import com.google.gson.JsonArray;
import com.google.gson.JsonObject;

/**
 * JSON轉換工具類
 * 
 * @author yyx 2019年1月8日
 */
public class JsonUtil {
    /**
     * 使用Gson將ResultSet結果集轉換成JsonArray 調用方法前判斷空
     * 
     * @param rs
     * @return
     */
    public static JsonArray fromResultSetToJson(ResultSet rs) {
        try {
            // json數組
            JsonArray jsonArray = new JsonArray();
            // 獲取列數
            ResultSetMetaData metaData = rs.getMetaData();
            int columnCount = metaData.getColumnCount();

            // 遍歷ResultSet中的每條數據
            while (rs.next()) {
                JsonObject jsonObj = new JsonObject();

                // 遍歷每一列
                for (int i = 1; i <= columnCount; i++) {
                    String columnName = metaData.getColumnLabel(i);
                    String value = rs.getString(columnName);
                    jsonObj.addProperty(columnName, value);
                }
                jsonArray.add(jsonObj);
            }

            return jsonArray;
        } catch (Exception ex) {

        }
        return null;
    }
}
package com.utils;

import java.io.PrintWriter;

import javax.servlet.http.HttpServletResponse;

/**
 * 用於將後臺處理相關業務邏輯後獲得的最終結果返回到前端， 能夠是頁面，也能夠是js異步調用的結果
 * 
 * @author yyx 2019年1月8日
 */
public class ResponseUtil {

    public static void write(HttpServletResponse response, Object o) throws Exception {
        response.setContentType("text/html;charset=utf-8");
        PrintWriter out = response.getWriter();
        out.println(o.toString());
        out.flush();
        out.close();
    }
}

4.建立數據庫配置文件jdbc.properties

driver=com.mysql.jdbc.Driver
jdbcUrl=jdbc:mysql://localhost:3306/db_pagination
user=root
password=iytb890214 

   前端分頁（即假分頁）

前端分頁就是將全部要顯示的數據所有查詢出來後，進行前臺的分頁，適合數據量較小的Web項目 css

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>前端分頁</title>
<link rel="stylesheet" type="text/css"
    href="${pageContext.request.contextPath}/jquery-easyui-1.5.1/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
    href="${pageContext.request.contextPath}/jquery-easyui-1.5.1/themes/icon.css">
<script type="text/javascript"
    src="${pageContext.request.contextPath}/jquery-easyui-1.5.1/jquery.min.js"></script>
<script type="text/javascript"
    src="${pageContext.request.contextPath}/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>
<script type="text/javascript"
    src="${pageContext.request.contextPath}/jquery-easyui-1.5.1/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("#studatagrid").datagrid({
            title : "基本數據表格",
            singleSelect : true,
            collapsible : true,
            fitColumns : true,
            rownumbers : true,
            fit : true,
            pagination : true,
            pageSize : 10,
            pageList : [ 10, 20, 40 ],
            loadFilter : partPurchasePagerFilter,
            url : '${pageContext.request.contextPath}/stuDatagridData.do',
        })
    })

    //通用分頁
    function partPurchasePagerFilter(data) {
        if (typeof data.length == 'number' && typeof data.splice == 'function') {
            data = {
                total : data.length,
                rows : data
            }
        }
        var dg = $(this);
        var opts = dg.datagrid('options');
        var pager = dg.datagrid('getPager');
        pager.pagination({
            onSelectPage : function(pageNum, pageSize) {
                opts.pageNumber = pageNum;
                opts.pageSize = pageSize;
                pager.pagination('refresh', {
                    pageNumber : pageNum,
                    pageSize : pageSize
                });
                dg.datagrid('loadData', data);
            }
        });
        if (!data.originalRows) {
            data.originalRows = (data.rows);
        }
        var start = (opts.pageNumber - 1) * parseInt(opts.pageSize);
        var end = start + parseInt(opts.pageSize);
        data.rows = (data.originalRows.slice(start, end));
        return data;
    }
</script>
</head>
<body class="easyui-layout">
    <div data-options="region:'center',title:'center title'"
        style="padding: 5px; background: #eee;">
        <table id="studatagrid" class="easyui-datagrid"
            style="width: 100%; height: 100%">
            <thead data-options="frozen:true">
                <tr>
                    <th data-options="field:'stuId',hidden:true"></th>
                    <th data-options="field:'stuSno',width:150,align:'center'">學生學號</th>
                    <th data-options="field:'stuName',width:150,align:'center'">學生姓名</th>
                </tr>
            </thead>
            <thead>
                <tr>
                    <th data-options="field:'stuSex',width:100,align:'center'">學生性別</th>
                    <th data-options="field:'stuAge',width:100,align:'center'">學生年齡</th>
                    <th data-options="field:'stuEmail',width:100,align:'center'">學生郵箱</th>
                    <th data-options="field:'stuQQ',width:100,align:'center'">學生QQ</th>
                    <th data-options="field:'stuAddress',width:200,align:'center'">學生地址</th>
                </tr>
            </thead>
        </table>
    </div>
</body>
</html>
package com.servlets;

import java.io.IOException;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.google.gson.JsonArray;
import com.google.gson.JsonObject;
import com.utils.JdbcUtil;
import com.utils.JsonUtil;
import com.utils.ResponseUtil;

public class StudentServletFrontEnd extends HttpServlet {
    private static final long serialVersionUID = 1L;

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        Connection connection = null;
        PreparedStatement preparedStatement = null;
        ResultSet resultSet = null;
        try {
            connection = JdbcUtil.getConnection();
            String sql = "select * from easyui_pagination_stu";
            preparedStatement = connection.prepareStatement(sql);
            resultSet = preparedStatement.executeQuery();

            JsonObject jsonObject = new JsonObject();
            if (resultSet != null) {
                JsonArray jsonArray = JsonUtil.fromResultSetToJson(resultSet);
                
                //Json對象賦值
                jsonObject.addProperty("total", jsonArray.size());
                jsonObject.add("rows", jsonArray);

                ResponseUtil.write(resp, jsonObject.toString());
            }
        } catch (Exception e) {

        } finally {
            JdbcUtil.colseResource(connection, preparedStatement, resultSet);
        }
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet(req, resp);
    }

}

   後端分頁（即真分頁）

後端分頁就是將分頁參數[第幾頁](pageIndex)和[一頁多少數據](pageSize)傳遞給後臺，快速的查詢數據，適合數據量大的項目html

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>後端分頁</title>
<link rel="stylesheet" type="text/css"
    href="${pageContext.request.contextPath}/jquery-easyui-1.5.1/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
    href="${pageContext.request.contextPath}/jquery-easyui-1.5.1/themes/icon.css">
<script type="text/javascript"
    src="${pageContext.request.contextPath}/jquery-easyui-1.5.1/jquery.min.js"></script>
<script type="text/javascript"
    src="${pageContext.request.contextPath}/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>
<script type="text/javascript"
    src="${pageContext.request.contextPath}/jquery-easyui-1.5.1/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("#studatagrid").datagrid({
            title : "基本數據表格",
            singleSelect : true,
            collapsible : true,
            fitColumns : true,
            rownumbers : true,
            fit : true,
            pagination : true,
            pageSize : 10,
            pageList : [ 10, 20, 40 ],
            url : '${pageContext.request.contextPath}/stuDatagridDataBack.do',
        })
    })
</script>
</head>
<body class="easyui-layout">
    <div data-options="region:'center',title:'center title'"
        style="padding: 5px; background: #eee;">
        <table id="studatagrid" class="easyui-datagrid"
            style="width: 100%; height: 100%">
            <thead data-options="frozen:true">
                <tr>
                    <th data-options="field:'stuId',hidden:true"></th>
                    <th data-options="field:'stuSno',width:150,align:'center'">學生學號</th>
                    <th data-options="field:'stuName',width:150,align:'center'">學生姓名</th>
                </tr>
            </thead>
            <thead>
                <tr>
                    <th data-options="field:'stuSex',width:100,align:'center'">學生性別</th>
                    <th data-options="field:'stuAge',width:100,align:'center'">學生年齡</th>
                    <th data-options="field:'stuEmail',width:100,align:'center'">學生郵箱</th>
                    <th data-options="field:'stuQQ',width:100,align:'center'">學生QQ</th>
                    <th data-options="field:'stuAddress',width:200,align:'center'">學生地址</th>
                </tr>
            </thead>
        </table>
    </div>
</body>
</html>
package com.servlets;

import java.io.IOException;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.google.gson.JsonArray;
import com.google.gson.JsonObject;
import com.utils.JdbcUtil;
import com.utils.JsonUtil;
import com.utils.ResponseUtil;

public class StudentServletBackEnd extends HttpServlet {
    private static final long serialVersionUID = 1L;

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        int pageNo = Integer.parseInt(req.getParameter("page"));
        int pageSize = Integer.parseInt(req.getParameter("rows"));
        Connection connection = null;
        PreparedStatement preparedStatement = null;
        ResultSet resultSet = null;
        try {
            // 這裏能夠使用緩存，從緩存中獲取結果；
            // 若是爲空，則從新獲取並存入緩存，緩存須要設置過時時間
            int total = getCount();
            String sql = "select * from easyui_pagination_stu limit " + (pageNo - 1) * pageSize + "," + pageSize;
            connection = JdbcUtil.getConnection();
            preparedStatement = connection.prepareStatement(sql);
            resultSet = preparedStatement.executeQuery();
            JsonObject jsonObject = new JsonObject();
            if (resultSet != null) {
                JsonArray jsonArray = JsonUtil.fromResultSetToJson(resultSet);
                jsonObject.addProperty("total", total);
                jsonObject.add("rows", jsonArray);
                System.out.println(jsonObject.toString());
                ResponseUtil.write(resp, jsonObject.toString());
            }
        } catch (Exception ex) {

        } finally {
            JdbcUtil.colseResource(connection, preparedStatement, resultSet);
        }
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet(req, resp);
    }

    protected int getCount() {
        Connection connection = null;
        PreparedStatement preparedStatement = null;
        ResultSet resultSet = null;
        int total = 0;
        try {
            connection = JdbcUtil.getConnection();
            String countStr = "select count(*) from easyui_pagination_stu";
            preparedStatement = connection.prepareStatement(countStr);
            resultSet = preparedStatement.executeQuery();
            if (resultSet != null) {
                while (resultSet.next()) {
                    total = resultSet.getInt(1);
                }
                System.out.println(total);
                return total;
            }
        } catch (Exception ex) {

        } finally {
            JdbcUtil.colseResource(connection, preparedStatement, resultSet);
        }
        return total;
    }
}
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程