文章目录

一、jqGrid 入门

1.1 jqGrid 安装
1.2 jqGrid 简单示例

二、jqGrid 传输数据

2.1 请求对象 JqGridPageReq
2.2 响应对象 JqGridPageResp
2.3 使用 springMVC 传输 JSON 数据

三、jqGrid 分页

3.1 PageBounds 分页器
3.2 PageBounds 调用
3.3 PageBounds 分页原理

jqGrid 是一款基于 jQuery 的表格插件，通过它开发者可以轻易实现前后端的数据交互（使用 ajax 异步通信），并将之以表格的形式展现在前台页面上。

一、jqGrid 入门

1.1 jqGrid 安装

想要在项目中使用 jqGrid，首先要导入 jqGrid 的几个 js 文件和 css 文件。具体如下：

<script language="javascript" src="${ctx}/js/jquery-3.1.1.min.js" ></script>
<script language="javascript" src="${ctx}/js/jqGrid/js/jquery-ui.min.js" ></script>
<script language="javascript" src="${ctx}/js/jqGrid/js/i18n/grid.locale-cn.js" ></script>
<script language="javascript" src="${ctx}/js/jqGrid/js/jquery.jqGrid.js" ></script>
<link rel="stylesheet" href="${ctx}/js/jqGrid/theme/jquery-ui.min.css" />
<link rel="stylesheet" href="${ctx}/js/jqGrid/theme/ui.jqgrid.css" />

当然，体贴如我是不会忘记附上下载地址的。

下载 jqGrid 插件请戳我！

下载 jqGrid 主题请戳我！

然后，我们再对这几个文件作简要的说明。

由于 jqGrid 是依赖与 jQuery 框架的，因此我们需要导入 jquery 文件。
如果我们想让 jqGrid 以中文的形式展示提示语，那么我们需要导入 grid.locale-cn.js 文件。它可以理解为汉化包，支持 jqGrid 的提示语以汉字的形式显示。
jqGrid 作为一款前端的表格插件，自然会有多种主题，而 jquery-ui.min.js、jquery-ui.min.css、ui.jqgrid.css 正是用于实现 jqGrid 个性化主题的文件。
最后也是最重要的，就是 jqGrid 的核心文件 jquery.jqGrid.js。当然，你也可以选择导入 jquery.jqGrid.min.js。这两者的区别在于，前者是完整版的，具有完整的注释，方便源码阅读，而后者是压缩版的，更适合用于生产环境。

导入上述几个文件后，标志着我们已经完成对 jqGrid 的安装，这时，就让我们以一个简单的示例，来看看 jqGrid 的效果。

1.2 jqGrid 简单示例

首先，我们先来看看一个完整的 jqGrid 实例的前端代码。

HTML 部分：

<body><div class="content-wrap"><!-- jqGrid 表格 --><table id="list"></table><!-- 翻页导航栏 --><div id="pager" class="pager"></div></div>
</body>

js 部分：

$(document).ready(function () {$('#list').jqGrid({url: ctx + '/student/query-list', // 获取数据的地址datatype: 'json', // 从服务器端返回的数据类型，默认xml。可选类型：xml，local，json，jsonnp，script，xmlstring，jsonstring，clientsidemtype: 'POST', // 提交方式，默认为GETheight: 'auto', // 高度，表格高度。可为数值、百分比或'auto'width: 1000, // 如果设置则按此设置为主，如果没有设置则按colModel中定义的宽度计算colNames: ['姓名', '性别', '邮箱', '生日', '学历', '状态', '入学时间'], // 列显示名称，是一个数组对象colModel: [// name 表示列显示的名称；// index 表示传到服务器端用来排序用的列名称；// width 为列宽度；// align 为对齐方式；// sortable 表示是否可以排序{name: 'name', index: 'name', width: '15%', align: 'center'},{name: 'sex', index: 'sex', width: '20%', align: 'center'},{name: 'email', index: 'email', width: '20%', align: 'center'},{name: 'birth', index: 'birth', width: '20%', align: 'center'},{name: 'education', index: 'education', width: '20%', align: 'center'},{name: 'status', index: 'status', width: '20%', align: 'center'},{name: 'entranceTime', index: 'entranceTime', width: '20%', align: 'center'}],rownumbers: true,// 显示左侧的序号//altRows:true,// 设置为交替行表格,默认为false//sortname:'entranceTime', // 排序列的名称，此参数会被传到后台//sortorder:'asc', // 排序顺序，升序或者降序（ASC或DESC）viewrecords: true, // 是否在翻页导航栏显示记录总数rowNum: 5, // 每页显示记录数rowList: [5, 10, 15], // 用于改变显示行数的下拉列表框的元素数组pager: $('#pager') // 定义翻页用的导航栏});$('#list4').jqGrid('setLabel', 'rn', '序号'); // 为序号列命名
});

在这个代码示例中，我已经为每个属性添加了注释说明，所以不再另外讨论里面每个属性的作用。但是，需要注意的是，上述代码，只是 jqGrid 的一个简单示例，jqGrid 还有更多神奇的属性和方法，等待大家去挖掘。如果你有兴趣，不妨戳下面的链接研究研究。

英语渣渣请戳这里~

英语学霸请戳这里~

我相信，细心的读者一定会发现，在这个简单的示例中，我没有说明如何获取数据。关于这部分，请不要着急，我会在下文中进行详细地介绍。

那么，现在先让我们欣赏一下上述示例运行的效果吧！

二、jqGrid 传输数据

传输数据是 jqGrid 中的重要环节。本文采用 springMVC 的方式进行前后端的数据交互，采用 JSON 作为数据传输的格式。

2.1 请求对象 JqGridPageReq

首先，我们介绍一下请求对象 JqGridPageReq。该对象的作用是接收前端 jqGrid 传来的参数，然后通过这些参数到数据库查询相应的数据。代码如下：

public class JqgridPageReq<T> {/*** 总页数*/private Integer total;/*** 当前页*/private Integer page;/*** 每页记录数*/private Integer rows;private T qo;/*** 排序字段*/private String sidx;/*** 排序*/private String sord;public Integer getTotal() {return total;}public void setTotal(Integer total) {this.total = total;}public Integer getPage() {return page;}public void setPage(Integer page) {this.page = page;}public Integer getRows() {return rows;}public void setRows(Integer rows) {this.rows = rows;}public T getQo() {return qo;}public void setQo(T qo) {this.qo = qo;}public String getSidx() {return sidx;}public void setSidx(String sidx) {this.sidx = sidx;}public String getSord() {return sord;}public void setSord(String sord) {this.sord = sord;}
}

2.2 响应对象 JqGridPageResp

然后是响应对象 JqGridPageResp。该对象的作用是将结果集、页码、记录数等信息传输给前台，从而前台可以获取数据并且将其显示出来。

import java.util.List;public class JqgridPageResp<T> {/*** 总页数*/private Integer total = 0;/*** 当前页*/private Integer page = 0;/*** 本次查询总记录数*/private Integer records = 0;/*** 结果集*/private List<T> rows;public Integer getTotal() {return total;}public void setTotal(Integer total) {this.total = total;}public Integer getPage() {return page;}public void setPage(Integer page) {this.page = page;}public Integer getRecords() {return records;}public void setRecords(Integer records) {this.records = records;}public List<T> getRows() {return rows;}public void setRows(List<T> rows) {this.rows = rows;}
}

2.3 使用 springMVC 传输 JSON 数据

尽管我们已经建立好了请求对象与响应对象，但是目前，我们的 springMVC 还无法识别它们。我们必须进行相关的配置，才能让 springMVC 实现请求参数到 POJO 的映射。

我们只需在配置文件 spring-servlet.xml 中添加如下配置：

<mvc:annotation-driven ><mvc:message-converters><bean class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter"/></mvc:message-converters>
</mvc:annotation-driven>

MappingJackson2HttpMessageConverter 可以自动完成 POJO 对象和 JSON 数据的转化。这样，当我们从前端传参给服务端时，若 JqgridPageReq 对象中含有与传入参数名字相同的成员变量，spring 将自动调用 JqgridPageReq 中对应的 set 方法为该变量赋值，从而实现 JSON 数据到 POJO 对象的映射。同理，当我们的服务端返回数据给前端时，spring 会将 POJO 对象转化成 JSON 格式后再返回响应。

了解这些原理后，我们就可以来看看 Controller 层中的具体实现：

@RequestMapping(value = "/query-list", method = RequestMethod.POST)
@ResponseBody
public Object queryStudentList(JqgridPageReq<Student> req, BaseQo qo) {JqgridPageResp<Student> resp = new JqgridPageResp<Student>();// 获得当前页码qo.setPageNumber(req.getPage());// 获得每页记录数qo.setPageSize(req.getRows());// 查询学生信息记录PageList<Student> studentList = studentInfoService.queryStudentList(qo);// 获取分页对象Paginator paginator = studentList.getPaginator();// 返回当前页码resp.setPage(paginator.getPage());// 返回总记录数resp.setRecords(paginator.getTotalCount());// 返回总页数resp.setTotal(paginator.getTotalPages());// 返回查询数据resp.setRows(studentList);return resp;
}

其中，函数参数 req 负责接收前端传来的参数，变量 resp 负责将服务器端处理后的数据返回给前端，@ResponseBody 负责告诉 springMVC 跳过视图解析，直接将 JSON 数据返回给前端。这样，我们就实现了 jqGrid 与服务端的数据交互。

三、jqGrid 分页

jqGrid 作为一款表格插件，自然避免不了分页的问题。在上述的代码中，我们已经知道 jqGrid 会向服务端发送页码信息，然后服务端在处理后也会返回分页信息给前端。那么这个分页的实现，究竟是靠什么完成的呢？且看本部分的主角，PageBounds。

3.1 PageBounds 分页器

PageBounds 是大神 miemiedev 写的一个 Mybatis 分页控件。在使用 PageBounds 前，我们需要在项目的 pom.xml 文件里添加依赖：

<!-- MyBatis 分页器 -->
<dependency><groupId>com.github.miemiedev</groupId><artifactId>mybatis-paginator</artifactId><version>1.2.8</version>
</dependency>

PageBounds 有以下构造方法：

new PageBounds(); // 默认构造函数不提供分页，返回 ArrayList
new PageBounds(int limit); // 取 TOPN 操作，返回 ArrayList
new PageBounds(Order... order); // 只排序不分页，返回 ArrayListnew PageBounds(int page, int limit); // 默认分页，返回 PageList
new PageBounds(int page, int limit, Order... order); // 分页加排序，返回PageList
new PageBounds(int page, int limit, List<Order> orders, boolean containsTotalCount); // 使用 containsTotalCount 来决定查不查询 totalCount，即返回 ArrayList 还是 PageList

这里需要说明的是，上面代码注释部分提到的 PageList 其实是 ArrayList 的子类，它与 ArrayList 的差别在于它包含了一个返回 Paginator 对象（存有分页信息）的方法。

public Paginator getPaginator() {return this.paginator;
}

3.2 PageBounds 调用

当我们要调用 PageBound 实现分页时，只需要在我们的 service 实现类中编写如下代码，即可实现。

public PageList<Student> queryStudentList(BaseQo qo) {PageBounds pgs = new PageBounds(qo.getPageNumber(), qo.getPageSize());return studentDao.queryStudentList(qo, pgs);
}

看到这里时，我相信有些读者已经一脸懵逼了。为什么我们只需要在 dao 接口中传入 PageBounds 类型参数，就可以实现分页？这不科学啊？印象中的分页，应该是需要经过很多代码处理的才对。关于这些问题，不慌，我们现在就来解决他们！

3.3 PageBounds 分页原理

在以前，如果让你写一个分页的代码，你会怎么写？我的思路是这样的，从数据库中把符合查询条件的数据找出来，放在一个 List 中，然后通过页码、每页记录数从 List 中找出每一页的数据集 newList。这个思路的具体实现代码如下：

public List<Student> getInitPage(List<Student> list, int Page, int pageSize) {List<Student> newList = new ArrayList<Diary>();this.list = list; // 结果集recordCount = list.size(); // 总记录数this.pageSize = pageSize; // 每页记录数this.maxPage = (recordCount % pageSize == 0) ? (recordCount / pageSize) : (recordCount/pageSize + 1); // 最大页数try {for (int i = (Page - 1) * pageSize; i <= Page * pageSize - 1; i++) {try {// 在list中，下标最大值为 recordCount-1if (i >= recordCount) {break;}} catch (Exception e) {// ignore}newList.add(list.get(i));}} catch (Exception e) {e.printStackTrace();}return newList;
}

而 PageBounds 的分页原理，其实跟这个是非常相似的。只不过，PageBounds 并不是把所有记录取出来再分页，而是根据页码和每页记录，通过在 SQL 查询语句上添加 limit 限制条件，从数据库中读取指定部分的记录。

看到这里，相信不少人都会恍然大悟。但是，又有一个新的问题产生了。我知道 PageBounds 的作用原理，但是它究竟是如何作用在 SQL 语句上的？为什么我们只是在 dao 层接口把它作为参数传入，它就可以对 SQL 产生作用？

这时，就轮到 interceptor 登场了！interceptor 的中文意思是拦截，看到拦截这个词，你是不是马上反应过来了？没错，PageBounds 就是把我们的 SQL 拦截下来，然后加上它的 limit 条件，再传给数据库。

不过，要使 PageBounds 具备拦截功能，我们还需要在 MyBatis 的配置文件 mybatis-conf.xml 中添加一些配置：

<configuration><plugins><plugin interceptor="com.github.miemiedev.mybatis.paginator.OffsetLimitInterceptor"><property name="dialectClass" value="com.github.miemiedev.mybatis.paginator.dialect.MySQLDialect" /></plugin></plugins><mappers><mapper resource="panda/student/project/dao/studentMapper.xml" /></mappers>
</configuration>

这里需要说明的是，如果你用的是 Oracle 数据库，需要导入的是不同的包，也就是 dialectClass 对应的 value 要不同。最后，让我们瞅瞅，这个拦截器究竟长啥样。

package com.github.miemiedev.mybatis.paginator.dialect;public class MySQLDialect extends Dialect {public MySQLDialect() {}public boolean supportsLimitOffset() {return true;}public boolean supportsLimit() {return true;}public String getLimitString(String sql, int offset, String offsetPlaceholder, int limit, String limitPlaceholder) {return offset > 0?sql + " limit " + offsetPlaceholder + "," + limitPlaceholder:sql + " limit " + limitPlaceholder;}
}

看到 getLimitString 方法，你心中的疑问是不是都解开了。每当我们准备传送 SQL 给数据库时，MySQLDialect 会将它拦截下来，交给 getLimitString 方法处理后，再发给数据库。我们的分页查询，就这样实现了。

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

动物凶猛游戏好玩
很早的一篇文章，贴上来留个纪念吧：）动物凶猛游戏好玩《动物凶猛》是王朔一篇小说的名字，写的是什么记不是很清楚了，只是固执的记得这个名字；也许是我在文字上的“造诣”和王朔相差得太远了点吧（^^费话），除了“好玩”，我确实是想不出可以用别的什么词来修饰游戏，又…...
2024/5/9 20:45:15
IIS admin 服务无法启动的解决办法
解决方法： 1.卸载IIS 2.重新启动并进入安全模式（这个步骤不能省） 3.在安全模式下进去到%windir%/System32/inetsrv，手动将这个目录删除。 4.如果你现在开心的话也可以删除%windir%/system32/Logfiles中的文件，因为里面存放着IIS的日志 5.当然你还可以删除%windir%iis…...
2024/4/20 8:34:20
QTP中FireEvent实现多样JS操作
今天录制这样一个操作的脚本时，遇到一个问题：当鼠标移到某个对象上时，才会出现对应的操作，而这些都是通过JS来实现的，录制完了之后，只能获取到对应操作的link的点击，而出现对应有操作功能的对象因为没有做点击的操作，无法录制下来，这就导致，回放时鼠标没有移动而找不…...
2024/5/9 20:30:42
UE4学习笔记:学习UE4中的UMG(图形UI设计器)工具(二)： Widget Blueprint控件蓝图的简单应用
在简单了解控件蓝图之后，来进一步了解应用Widget Blueprint控件蓝图一.创建自己的控件除了使用控制板中的UMG自带的控件外，我们还可以使用自行创建带有我们自己添加内容的控件。创建一个控件蓝图，删除其中默认的Canvas Panel控件，之后添加带Text子控件的Button控件，如下…...
2024/5/9 12:30:23
jQuery 表格插件
本文搜集了大量 jQuery 表格插件，帮助 Web 设计者更好地驾御 HTML 表格，你可以对表格进行横向和竖向排序，设置固定表头，对表格进行搜索，对大表格进行分页，对表格进行滚动，拖放操作等等。这些插件很多都包含详细的教程。希望能对大家的开发有帮助。 jQuery 表格插件 Flex…...
2024/4/19 4:43:31
IIS无法启动问题的解决
分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.csdn.net/jiangjunshow也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！ IIS无法启动，显示“服务并未即使响应启动或控制请求”，我用两种办法都没有解决：1、把IIS…...
2024/5/9 16:57:23
C语言学生学籍管理系统源码，有实验报告噢！
楼主的一些经历，给大家分享一下，希望能够帮到大家。文中有不足的地方还请指出，我们一同探讨，或者可以直接看正文（恩~第一次在这儿发帖确实有点小激动O(∩_∩)O~）。我是一名职高学生，入校选择专业时毫不犹豫选择了计算机，只因对此拥有浓厚的兴趣（哈哈，可能是很早接触计…...
2024/4/11 17:17:00
js表单事件汇总
onabort()当用户终止正在打开的网页时产生该事件。 onblur()某元素失去活动焦点时产生该事件。例如鼠标在文本框中点击后又在文本框外点击时就会产生。 onchange()当网页上某元素的内容发生改变时产生例如在文本框中输入文本后又在文本框外点击时就会产生。 onclick()单击网页上…...
2024/4/12 15:24:30
unity实例化游戏对象instantiate()
unity一共有10个实例化对象的函数重载1、参数只有一个object对象实例化prefab结果如图：cube的位置不确定是不是随机的，我试了几个，最后cube的position都是上面那个2、参数只有一个，泛型，参数类型可以任意，但最后都可以实例化游戏对象使用方法：创建出来的cylinder与cylin…...
2024/5/9 22:13:34
flask之blueprint和url_for的关系
主旨：主要记录在使用flask buleprint的时候遇到的一些问题。问题1：在创建蓝图的时候比如我在A/keystone.py创建一个蓝图a_keystone = Blueprint(keystone,__name__)，没毛病。当我在B/keystone.py创建一个蓝图的时候b_keystone = Blueprint(keystone,__name__)。也没毛病哈，…...
2024/4/19 10:43:40
IIS无法启动的问题
为什么80%的码农都做不了架构师？>>> 第一种解决办法：在Internet信息服务下有本地计算机(计算机机名)，单击名键，选择断开，提示确实要断开本地计算机(计算机机名)吗？选择确定。　　右键单击Internet，选择连接，计算机名填本机名称，用户名填本机管理员帐号（…...
2024/5/9 13:39:00
jQuery Handsontable【jQuery插件-一个非常酷的可编辑表格】
jQuery Handsontable 是jQuery插件中一款非常酷的可编辑的表格，它的描述是：a minimalistic Excel-like data grid editor for HTML, JavaScript & jQuery. (一款类似于Excel的可编辑表格，通过HTML，JavaScript和jQuery可以对它进行实现) 我们来简单介绍下0.10.0-beta4，…...
2024/4/17 15:46:31
js回调函数callback
js回调函数: 将一个方法对象a 传递给另一个方法对象 b，让后者在适当的时候执行 a。这就是所谓的“回调”了。1、背景 Javascript中的回调函数，相信大家都不陌生，最明显的例子是做Ajax请求时，提供的回调函数，实际上DOM节点的事件处理方法（onclick,ondblclick等）也是回…...
2024/4/17 15:45:43
VS2017 IIS Express 无法启动解决办法
用记事本或者其他什么文本编辑器，打开项目的.csproj文件，定位到<WebProjectProperties>，把关于IIS的配置<DevelopmentServerPort>、<DevelopmentServerVPath>、<IISUrl>属性都清空，<AutoAssignPort>为True，保存，重新用VS2015打开项目，然后…...
2024/4/17 15:47:43
Flask 用Blueprint实现模块化的应用
在一个大型项目中，肯定会有很多模块组成，比如一个网络管理系统可能有流量运营模块，实时分析模块，故障预警模块等。我们可以利用Flask Blueprint 实现每个模块的功能进行独立的开发与管理，后面的实践案例主要体现Buleprint以下功能 1. 可以独立管理网页的静态文件，如js，c…...
2024/4/19 15:14:01
提高表格操作的十五款jQuery插件
时间:2010-07-05 17:30来源:暴风彬彬作者:网络Table Drag and Drop jQuery plugin-jQuery表格拖拽插件这个简单的jQuery插件可以让用户使用拖拽行的方式重新排列表格各行，任意单独行可以设置为不可拖拽和/或不可放置。 table表格由于它的浏览器兼容性和复杂的标签嵌套方式，…...
2024/4/19 22:35:28
JS事件大全
一般事件事件浏览器支持描述 onClick IE3|N2|O3 鼠标点击事件，多用在某个对象控制的范围内的鼠标点击 onDblClick IE4|N4|O 鼠标双击事件 onMouseDown IE4|N4|O 鼠标上的按钮被按下了 onMouseUp IE4|N4|O 鼠标按下后，松开时激发的事件 onMouseOver IE3|N2|O3 当鼠标移…...
2024/4/19 22:31:07
Karaf教程第9部分基于注解的blueprint和JPA
Karaf教程第9部分基于注解的blueprint和JPA 本部分演示如何用模型持久层和基于CDI注解的UI创建一个小的应用。 1 blueprint-maven-plugin 编写blueprint xml文件是很繁琐的，太大的blueprint xml文件很难与代码修改保持同步，尤其是代码重构。所以很多人喜欢使用注解来进行声明…...
2024/4/19 15:13:55
IIS无法启动计算机上的服务W3SVC如何修复、万维网发布服务(w3svc)已停止解决办法
有段时间没有用过iis服务器，今天发布网站的时候无法启动网站，一直出现这个警告框，说是w3svc 已停止。网上说的有点零碎，我这儿整理一下。目前我的iis服务器正常运行了，希望对你们也有帮助！1、出现的问题是如图：右击网站管理-启动的时候会报如下图警告框。2.解决办法首先…...
2024/4/11 17:18:30
JS插件封装——生成表格
调用页面HTML代码如下：<!DOCTYPE html> <html lang="zh-cn"> <head><meta charset="UTF-8"><title>Document</title> </head> <body><div>输入行数: <input type="text" name="…...
2024/4/17 15:47:31

在 springMVC 中整合表格插件 jqGrid