一、普通网格

  • 前端index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html >

<html>

<%

    String path = request.getContextPath();

%>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<link rel="stylesheet" type="text/css"

    href="<%=path%>/script/easyUI-1.4/themes/bootstrap/easyui.css">

<link rel="stylesheet" type="text/css"

    href="<%=path%>/script/easyUI-1.4/themes/icon.css">

<script type="text/javascript"

    src="<%=path%>/script/easyUI-1.4/jquery-1.8.3.min.js"></script>

<script type="text/javascript"

    src="<%=path%>/script/easyUI-1.4/jquery.easyui.min.js"></script>

<script type="text/javascript"

    src="<%=path%>/script/easyUI-1.4/locale/easyui-lang-zh_CN.js"></script>

</head>

<script type="text/javascript">

    jQuery(function() {

        $('#dg').datagrid({

            url:"<%=path%>/servlet/getDataGrid",

            method : "POST",

            //定义网格的标题

            title : "普通网格",

            width : 450,

            columns : [ [

            //定义列，这里有三列，每一列的都是一个对象，title为列标题，field为字段的名称

            {

                title : "第一列列名",

                field : "id",

                width : 150

            }, {

                title : "第二列列名",

                field : "userName",

                width : 150

            }, {

                title : "第三列列名",

                field : "passWord",

                width : 150

            } ] ]

        });

    });

</script>

<body>

    <pre>

    1.普通的网格

    <table id="dg"></table>

</pre>

</body>

</html>
  • 后台从数据库中获取数据并封装为json格式的字符串响应回前台。
package servlet;

import java.io.IOException;

import java.io.PrintWriter;

import java.sql.Connection;

import java.sql.ResultSet;

import java.sql.Statement;

import java.util.ArrayList;

import java.util.HashMap;

import java.util.List;

import java.util.Map;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import com.google.gson.Gson;

import util.DBUtil;

/**

 * Servlet implementation class GetDataGridServlet

 */

@WebServlet("/servlet/getDataGrid")

public class GetDataGridServlet extends HttpServlet {

    private static final long serialVersionUID = 1L;

    /**

     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse

     *      response)

     */

    protected void doGet(HttpServletRequest request, HttpServletResponse response)

            throws ServletException, IOException {

        this.doPost(request, response);

    }

    /**

     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse

     *      response)

     */

    protected void doPost(HttpServletRequest request, HttpServletResponse response)

            throws ServletException, IOException {

        request.setCharacterEncoding("UTF-8");

        response.setCharacterEncoding("UTF-8");

        response.setContentType("text/html");

        PrintWriter out = response.getWriter();

        Connection conn = null;

        Statement stat = null;

        ResultSet rs = null;

        String sql = "";

        try {

            conn = DBUtil.getConn();

            sql = "select * from users";

            stat = conn.createStatement();

            rs = stat.executeQuery(sql);

            List<Map<String, String>> gridDataList = new ArrayList<Map<String, String>>();

            Map<String,Object> gridDataMap=new HashMap<String,Object>();

            Map<String, String> columnMap = null;

            while (rs.next()) {

                String id = (String.valueOf(rs.getInt("id")));

                String userName = rs.getString("userName");

                String passWord = rs.getString("passWord");

                columnMap = new HashMap<String, String>();

                columnMap.put("id", id);

                columnMap.put("userName", userName);

                columnMap.put("passWord", passWord);

                gridDataList.add(columnMap);

            }

            gridDataMap.put("total", gridDataList.size());

            gridDataMap.put("rows", gridDataList);

            Gson gson=new Gson();

            String str_gridData=gson.toJson(gridDataMap);

            System.out.println(str_gridData);

            out.print(str_gridData);

        } catch (Exception e) {

            e.printStackTrace();

        }

        out.flush();

        out.close();

    }

}

结果：

二、分页+排序网格

  • 数据库：

  • 前台
<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html >

<html>

<%

    String path = request.getContextPath();

%>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<link rel="stylesheet" type="text/css"

    href="<%=path%>/script/easyUI-1.4/themes/bootstrap/easyui.css">

<link rel="stylesheet" type="text/css"

    href="<%=path%>/script/easyUI-1.4/themes/icon.css">

<script type="text/javascript"

    src="<%=path%>/script/easyUI-1.4/jquery-1.8.3.min.js"></script>

<script type="text/javascript"

    src="<%=path%>/script/easyUI-1.4/jquery.easyui.min.js"></script>

<script type="text/javascript"

    src="<%=path%>/script/easyUI-1.4/locale/easyui-lang-zh_CN.js"></script>

</head>

<script type="text/javascript">

    jQuery(function() {

        $('#dg').datagrid({

            url:"<%=path%>/servlet/getDataGrid",

            //开启分页

            pagination:"true",

            //设置分页工具栏位置

            pagePosition:"bottom",

            //设置分页间隔

            pageList:[4,8,16],

            pageSize:4,

            width:240,

            //是否从服务器对数据进行排序

            remoteSort:true,

            //定义网格的标题

            title : "普通网格",

            fitColumns:true,

            columns : [ [

            //定义列，这里有三列，每一列的都是一个对象，title为列标题，field为字段的名称

            {

                title : "",

                field : "ck",

                checkbox:true

            },{

                title : "用户id",

                field : "id",

                //允许列使用排序,与表格中的remoteSort属性配合使用

                //如果sortable:true，remoteSort也为true，则对表格中的所有数据排序

                //如果sortable:true，remoteSort也为false，则对表格中的所有数据排序

                sortable:true

            }, {

                title : "用户名",

                field : "userName"

            }, {

                title : "密码",

                field : "passWord",

                formatter: function(value,row,index){

                    if (value.length<=6){

                        return "<font color='red'>密码长度小于6位</font>";

                    } else {

                        return value;

                    }

                }

            } ] ]

        });

    });

</script>

<body>

    <pre>

    1.分页+排序网格

    <table id="dg"></table>

</pre>

</body>

</html>
  •  pagination:"true"  开启分页功能。pageList:[4,8,16],表示用户可以选择显示4 8 16条记录，pageSize:4 表示一次显示4条记录
  • 列属性sortable 和表格属性remoteSort 配合使用。如果sortable:true，remoteSort也为true，则对表格中的所有数据排序。如果sortable:true，remoteSort也为false，则对表格中的所有数据排序
  • 后台
package servlet;

import java.io.IOException;

import java.io.PrintWriter;

import java.sql.Connection;

import java.sql.ResultSet;

import java.sql.Statement;

import java.util.ArrayList;

import java.util.HashMap;

import java.util.List;

import java.util.Map;

import javax.management.Query;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import org.apache.commons.dbutils.QueryRunner;

import org.apache.commons.dbutils.handlers.BeanListHandler;

import com.google.gson.Gson;

import com.mysql.cj.api.xdevapi.Result;

import bean.User;

import util.DBUtil;

/**

 * Servlet implementation class GetDataGridServlet

 */

@WebServlet("/servlet/getDataGrid")

public class GetDataGridServlet extends HttpServlet {

    private static final long serialVersionUID = 1L;

    /**

     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse

     *      response)

     */

    protected void doGet(HttpServletRequest request, HttpServletResponse response)

            throws ServletException, IOException {

        this.doPost(request, response);

    }

    /**

     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse

     *      response)

     */

    protected void doPost(HttpServletRequest request, HttpServletResponse response)

            throws ServletException, IOException {

        request.setCharacterEncoding("UTF-8");

        response.setCharacterEncoding("UTF-8");

        response.setContentType("text/html");

        PrintWriter out = response.getWriter();

        Connection conn = null;

        String sql = "";

        // 查询记录总数量的sql语句

        String countSQL = "select count(*) from users";

        try {

            conn = DBUtil.getConn();

            QueryRunner queryRunner=new QueryRunner();

            // 设置分页属性,page和rows是从前台传过来的参数，page指第几页，rows表示该页显示几条数据

            int page=Integer.valueOf(request.getParameter("page"));

            int rows=Integer.valueOf(request.getParameter("rows"));

            int startIndexx=0;

            if(page==1){

                 startIndexx = 0;

            }else{

                startIndexx=0+(page-1)*rows;

            }

            int endIndex = rows;

            // 查询记录总数量

            int count = getCount(countSQL);

            sql = "select * from users limit " + startIndexx + " , " + endIndex + "";

            List<User> userList=queryRunner.query(conn, sql, new BeanListHandler<>(User.class));

            List<Map<String, String>> gridDataList = new ArrayList<Map<String, String>>();

            Map<String, Object> gridDataMap = new HashMap<String, Object>();

            Map<String, String> columnMap = null;

            for(User user:userList){

                String id = (String.valueOf(user.getId()));

                String userName = user.getUserName();

                String passWord = user.getPassWord();

                columnMap = new HashMap<String, String>();

                columnMap.put("id", id);

                columnMap.put("userName", userName);

                columnMap.put("passWord", passWord);

                gridDataList.add(columnMap);

            }

            gridDataMap.put("total", count);

            gridDataMap.put("rows", gridDataList);

            Gson gson = new Gson();

            String str_gridData = gson.toJson(gridDataMap);

            System.out.println(str_gridData);

            out.print(str_gridData);

        } catch (Exception e) {

            e.printStackTrace();

        }

        out.flush();

        out.close();

    }

    /**

     * 根据sql查询数据库中的总记录数量

     *

     * @param countSQL

     * @return

     */

    private int getCount(String countSQL) {

        int res = 0;

        Connection conn = null;

        Statement stat = null;

        ResultSet rs = null;

        try {

            conn = DBUtil.getConn();

            stat = conn.createStatement();

            rs = stat.executeQuery(countSQL);

            while (rs.next()) {

                res = rs.getInt("count(*)");

            }

        } catch (Exception e) {

            e.printStackTrace();

        } finally {

            try {

                conn.close();

                rs.close();

                stat.close();

            } catch (Exception e2) {

                e2.printStackTrace();

            }

        }

        return res;

    }

}

结果：

三、分页+排序+查询网格

  • 前台
<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html >

<html>

<%

    String path = request.getContextPath();

%>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<link rel="stylesheet" type="text/css"

    href="<%=path%>/script/easyUI-1.4/themes/bootstrap/easyui.css">

<link rel="stylesheet" type="text/css"

    href="<%=path%>/script/easyUI-1.4/themes/icon.css">

<script type="text/javascript"

    src="<%=path%>/script/easyUI-1.4/jquery-1.8.3.min.js"></script>

<script type="text/javascript"

    src="<%=path%>/script/easyUI-1.4/jquery.easyui.min.js"></script>

<script type="text/javascript"

    src="<%=path%>/script/easyUI-1.4/locale/easyui-lang-zh_CN.js"></script>

</head>

<script type="text/javascript">

    jQuery(function() {

        var tools=[

            {id:"search",text:"根据id查询",iconCls:"icon-search",handler:function(){

                var search_id=$("#search_id").val();

                $('#dg').datagrid({

                    //queryParams方法在请求远程数据的时候发送额外的参数,参数一定要是json格式的对象，而表单序列化后是数组对象。需要将数组对象转为json格式的对象

                    queryParams: {

                        "search_id":search_id

                    }

                });

            }},

            {id:"add",text:"新增用户",iconCls:"icon-add"}

        ];

        $('#dg').datagrid({

            url:"<%=path%>/servlet/getDataGrid",

            //开启分页

            pagination : "true",

            //设置分页工具栏位置

            pagePosition : "bottom",

            //设置分页间隔

            pageList : [ 4, 8, 16 ],

            pageSize : 4,

            width : 240,

            //是否从服务器对数据进行排序

            remoteSort : true,

            //定义顶部工具栏的DataGrid面板

            toolbar : tools,

            //定义网格的标题

            title : "普通网格",

            fitColumns : true,

            columns : [ [

            //定义列，这里有三列，每一列的都是一个对象，title为列标题，field为字段的名称

            {

                title : "",

                field : "ck",

                checkbox : true

            }, {

                title : "用户id",

                field : "id",

                //允许列使用排序,与表格中的remoteSort属性配合使用

                //如果sortable:true，remoteSort也为true，则对表格中的所有数据排序

                //如果sortable:true，remoteSort也为false，则对表格中的所有数据排序

                sortable : true

            }, {

                title : "用户名",

                field : "userName"

            }, {

                title : "密码",

                field : "passWord",

                formatter : function(value, row, index) {

                    if (value.length <= 6) {

                        return "<font color='red'>密码长度小于6位</font>";

                    } else {

                        return value;

                    }

                }

            } ] ]

        });

    });

</script>

<body>

    <h1>1.分页+排序+查询网格</h1>

    <form id="form">

        查询用户id:<input type="text" name="search_id" id="search_id">

    </form>

    <table id="dg"></table>

</body>

</html>
  • 后台
package servlet;

import java.io.IOException;

import java.io.PrintWriter;

import java.sql.Connection;

import java.sql.ResultSet;

import java.sql.Statement;

import java.util.ArrayList;

import java.util.HashMap;

import java.util.List;

import java.util.Map;

import javax.management.Query;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import javax.swing.plaf.synth.SynthSeparatorUI;

import org.apache.commons.dbutils.QueryRunner;

import org.apache.commons.dbutils.handlers.BeanListHandler;

import com.google.gson.Gson;

import com.mysql.cj.api.xdevapi.Result;

import bean.User;

import util.DBUtil;

/**

 * Servlet implementation class GetDataGridServlet

 */

@WebServlet("/servlet/getDataGrid")

public class GetDataGridServlet extends HttpServlet {

    private static final long serialVersionUID = 1L;

    /**

     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse

     *      response)

     */

    protected void doGet(HttpServletRequest request, HttpServletResponse response)

            throws ServletException, IOException {

        this.doPost(request, response);

    }

    /**

     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse

     *      response)

     */

    protected void doPost(HttpServletRequest request, HttpServletResponse response)

            throws ServletException, IOException {

        request.setCharacterEncoding("UTF-8");

        response.setCharacterEncoding("UTF-8");

        response.setContentType("text/html");

        //获取查询条件

        String searchId=request.getParameter("search_id");

        PrintWriter out = response.getWriter();

        Connection conn = null;

        String sql = "select * from users where 1=1";

        // 查询记录总数量的sql语句

        String countSQL = "select count(*) from users";

        //

        try {

            conn = DBUtil.getConn();

            QueryRunner queryRunner=new QueryRunner();

            // 设置分页属性,page和rows是从前台传过来的参数，page指第几页，rows表示该页显示几条数据

            int page=Integer.valueOf(request.getParameter("page"));

            int rows=Integer.valueOf(request.getParameter("rows"));

            //如果需要排序，则前台会传需要排序的列名sort和排序方式order。

            String sortName=request.getParameter("sort");

            String sortType=request.getParameter("order");

            int startIndexx=0;

            if(page==1){

                 startIndexx = 0;

            }else{

                startIndexx=0+(page-1)*rows;

            }

            int endIndex = rows;

            // 查询记录总数量

            int count = getCount(countSQL);

            /**

             * 有查询条件时的sql语句

             */

            if(searchId!=null){

                sql=sql+" and id= "+searchId+"";

            }

            if(sortName!=null && sortType!=null){

                //说明需要排序

                sql = sql+" order by "+sortName+" "+sortType+"  limit " + startIndexx + " , " + endIndex + "   ";

            }else{

                //不需要排序

                sql = sql+" limit " + startIndexx + " , " + endIndex + "   ";

            }

            System.out.println(sql);

            List<User> userList=queryRunner.query(conn, sql, new BeanListHandler<>(User.class));

            List<Map<String, String>> gridDataList = new ArrayList<Map<String, String>>();

            Map<String, Object> gridDataMap = new HashMap<String, Object>();

            Map<String, String> columnMap = null;

            for(User user:userList){

                String id = (String.valueOf(user.getId()));

                String userName = user.getUserName();

                String passWord = user.getPassWord();

                columnMap = new HashMap<String, String>();

                columnMap.put("id", id);

                columnMap.put("userName", userName);

                columnMap.put("passWord", passWord);

                gridDataList.add(columnMap);

            }

            gridDataMap.put("total", count);

            gridDataMap.put("rows", gridDataList);

            Gson gson = new Gson();

            String str_gridData = gson.toJson(gridDataMap);

            System.out.println(str_gridData);

            out.print(str_gridData);

        } catch (Exception e) {

            e.printStackTrace();

        }

        out.flush();

        out.close();

    }

    /**

     * 根据sql查询数据库中的总记录数量

     *

     * @param countSQL

     * @return

     */

    private int getCount(String countSQL) {

        int res = 0;

        Connection conn = null;

        Statement stat = null;

        ResultSet rs = null;

        try {

            conn = DBUtil.getConn();

            stat = conn.createStatement();

            rs = stat.executeQuery(countSQL);

            while (rs.next()) {

                res = rs.getInt("count(*)");

            }

        } catch (Exception e) {

            e.printStackTrace();

        } finally {

            try {

                conn.close();

                rs.close();

                stat.close();

            } catch (Exception e2) {

                e2.printStackTrace();

            }

        }

        return res;

    }

}

结果：

最新文章

  1. golang坑1
  2. ios的网络数据下载和json解析
  3. CodeForces#275--DIV 2--A
  4. [Leetcode][JAVA] Pascal&#39;s Triangle I, II
  5. 如何通过源码生成Gatling可执行工具
  6. Gridview全选
  7. 开大Stack的一个小技巧
  8. Java equals 和 hashcode 方法
  9. CentOS 7安装配置FTP服务器
  10. SQL 三种基本Join
  11. 统计nginx单个IP访问日志并获取IP来源
  12. Saiku去掉登录模块
  13. (BUG记录)记一次与其他系统交互协作时造成的锁表问题
  14. Pre-shared key
  15. LoRa基础
  16. Oracle课程档案，第六天
  17. Eclipse集成scala插件
  18. Python常用模块--datetime
  19. LOJ#6032. 「雅礼集训 2017 Day2」水箱
  20. Java基础加强之并发（二）常用的多线程实现方式

热门文章

  1. 使用python显示当前系统中的所有进程并关闭某一进程
  2. angular父组件通过@ViewChild 主动获取子组 件的数据和方法
  3. It’s worth noting值得注意的是
  4. mysql查看被锁住的表
  5. PAT 甲级 1034 Head of a Gang (30 分)（bfs,map,强连通）
  6. SecureCRT 8.1破解方式
  7. AWS 解决方案架构师考点（Storage）
  8. 【c# 学习笔记】类实例化
  9. 《剑指offer》数学题及其它 (牛客11.05)
  10. git 命令使用