一、普通网格

  • 前端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;

    }

}

结果：

（四）网格（dataGrid）的更多相关文章

  1. EasyUI学习笔记（四）—— datagrid的使用

    一.传统的HTML表格 之前我们做表格的时候是这样写的: <table > <thead> <tr> <th>编号</th> <th& ...

  2. 【我们一起写框架】MVVM的WPF框架（四）—DataGrid

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

  3. 【jQuery EasyUI系列】创建CRUD数据网格

    在上一篇中我们使用对话框组件创建了CRUD应用创建和编辑用户信息.本篇我们来创建一个CRUD数据网格DataGrid 步骤1,在HTML标签中定义数据网格(DataGrid) <table id ...

  4. easyui之datagrid的使用

    http://www.cnblogs.com/ruanmou001/p/3840954.html 一.神马是easyui jQuery EasyUI是一组基于jQuery的UI插件集合,而jQuery ...

  5. 雷林鹏分享：jQuery EasyUI 数据网格 - 设置冻结列

    jQuery EasyUI 数据网格 - 设置冻结列 本实例演示如何冻结一些列,当用户在网格上移动水平滚动条时,冻结列不能滚动到视图的外部. 为了冻结列,您需要定义 frozenColumns 属性. ...

  6. 雷林鹏分享：jQuery EasyUI 数据网格 - 创建复杂工具栏

    jQuery EasyUI 数据网格 - 创建复杂工具栏 数据网格(datagrid)的工具栏(toolbar)可以包含按钮及其他组件. 您可以通个一个已存在的 DIV 标签来简单地定义工具栏布局,该 ...

  7. 雷林鹏分享：jQuery EasyUI 数据网格 - 动态改变列

    jQuery EasyUI 数据网格 - 动态改变列 数据网格(DataGrid)列可以使用 'columns' 属性简单地定义.如果您想动态地改变列,那根本没有问题.为了改变列,您可以重新调用dat ...

  8. 雷林鹏分享：jQuery EasyUI 数据网格 - 格式化列

    jQuery EasyUI 数据网格 - 格式化列 以下实例格式化在 easyui DataGrid 里的列数据,并使用自定义列的 formatter,如果价格小于 20 就将文本变为红色. 为了格式 ...

  9. 雷林鹏分享：jQuery EasyUI 数据网格 - 设置排序

    jQuery EasyUI 数据网格 - 设置排序 本实例演示如何通过点击列表头来排序数据网格(DataGrid). 数据网格(DataGrid)的所有列可以通过点击列表头来排序.您可以定义哪列可以排 ...

  10. 雷林鹏分享：jQuery EasyUI 数据网格 - 创建列组合

    jQuery EasyUI 数据网格 - 创建列组合 easyui 的数据网格(DataGrid)可以创建列组合,如下所示: 在本实例中,我们使用平面数据来填充数据网格(DataGrid)的数据,并把 ...

随机推荐

  1. What is the use of c# “Yield” keyword ?

    What is the use of c# “Yield” keyword ? “Yield keyword helps us to do custom stateful iteration over ...

  2. 上传图片获取base64编码、本地预览

    一.读取文件的对象 — new FileReader()   上传图片接口参数有图片base64编码(数组, imgBase64List ),主要用到 读取文件的对象 [ new FileReader ...

  3. 【Oracle】创建用户及设定权限

    ; grant create session to ufo; grant create tablespace to ufo; grant create table to ufo; grant drop ...

  4. 【Python】把文件名命名成canlendar.py竟然导致无法使用canlendar模块 附赠2020年月历

    这个bug困扰了我一阵,直到在 http://www.codingke.com/question/15489 找到了解决问题的钥匙,真是没想到居然是这个原因导致的. 下面是出错信息,可以看到只要目录下 ...

  5. 阶段5 3.微服务项目【学成在线】_day16 Spring Security Oauth2_14-认证接口开发-需求分析

    4 认证接口开发 4.1 需求分析 用户登录的流程图如下: 执行流程: 1.用户登录,请求认证服务 2.认证服务认证通过,生成jwt令牌,将jwt令牌及相关信息写入Redis,并且将身份令牌写入coo ...

  6. python面试必备-基础篇

    一.python中and, or, and-or语法 1.and   有假先出假 在Python 中,and 和 or 执行布尔逻辑演算,如你所期待的一样,但是它们并不返回布尔值:而是,返回它们实际进 ...

  7. nginx多个if条件并且查询

    set $flag 0; if (!-e $request_filename){    set $flag "${flag}1"; } if ($uri ~* "^(.* ...

  8. 【C# 开发技巧】如何防止程序多次运行

    一.引言 最近发现很多人在论坛中问到如何防止程序被多次运行的问题的,如: http://social.msdn.microsoft.com/Forums/zh-CN/6398fb10-ecc2-4c0 ...

  9. 给.Net Core添加Swagger实现接口文档自动生成

    1.添加Nuget相关引用 Swashbuckle.AspNetCore

  10. Fakes里的stub和shim的区别

    stub常用于虚拟接口.类.方法,无法重写静态方法(stub需要传递到具体调用代码中) shim常用于重写静态方法(在ShimsContext.Create()作用域内,拦截Runtime动态修改方法 ...