摘要：
上周，我们需要将项目中的公共表更改为jQuery插件形式的表。当我们找到jqgrid插件时，我们认为可以通过找到一个演示并检查api来解决问题。然而，这需要很多努力。让我们在这里做一个总结。首先，粘贴一个类似表格的图形。下载jqgrid的源代码：https://github.com/tonytomov/jqGrid英语api：http://trirand.com/blog/jqgrid/jqgrid.html英语演示：http://www.guriddo.net/demo/guriddojs/中文演示：http://blog.mn886.net/jqGrid/中文api：https://blog.csdn.net/zsq520520/article/details/533750731在引入css和js文件时，jqgrid必须首先在HTML5页面中使用，否则会混淆表样式，影响使用--jqgrid主题包-不必要--˃˂！
上周需要把一个项目中的普通table改成使用jQuery插件形式的表格，找到了jqgrid这个插件，本以为找个demo，查查api就能解决，没想到还是费了一番的功夫，在这里记录总结一下。
本文实现的内容主要有：基础表格的绘制，实现分页功能，将jqgrid修改为响应式表格。
先贴一张表格样子图
jqgrid源码下载地址：https://github.com/tonytomov/jqGrid
英文api：http://trirand.com/blog/jqgrid/jqgrid.html
英文demo：http://www.guriddo.net/demo/guriddojs/
中文demo：http://blog.mn886.net/jqGrid/
中文api：https://blog.csdn.net/zsq520520/article/details/53375073
1、引入css和js文件
首先jqgrid必须使用在HTML5的页面中，不然表格的样式会错乱，影响使用。
需要引入的css，js文件和一些图标和字体
文件结构如下
images文件下为表格中图标的图片
theme中为表格的不同主题样式
fonts文件下为使用Font Awesome图标所必须的字体文件
css文件
<!-- jqGrid组件基础样式包-必要 -->
<link rel="stylesheet" type="text/css" href="jqgrid/css/ui.jqgrid.css" />
<!-- jqGrid主题包-非必要 -->
<!-- 在jqgrid/css/theme这个目录下还有其他的主题包，可以尝试更换看效果 -->
<link rel="stylesheet" type="text/css" href="jqgrid/css/theme/start/jquery-ui-1.8.20.custom.css" />
<!-- 基础样式，无主题 -->
<!-- <link rel="stylesheet" type="text/css" href="http://t.zoukankan.com/jqgrid/css/jquery-ui.css" /> -->
<!-- 图标样式 -->
<link rel="stylesheet" type="text/css" href="jqgrid/css/font-awesome.min.css">js文件
<!-- jquery插件包-必要 -->
<script type="text/javascript" src="jqgrid/js/jquery-3.3.1.min.js"></script>
<!-- jqGrid插件包-必要 -->
<script type="text/javascript" src="jqgrid/js/jquery.jqgrid.min.js"></script>
<!-- jqGrid插件的多语言包-非必要 -->
<script type="text/javascript" src="jqgrid/js/grid.locale-cn.js"></script>
2、页面中放置表格
<div class="col-xs-12">
<table id="jqGrid"></table>
<div id="jqGridPager"></div>
</div>table为表格本体，下面的div是显示表格的分页，记录条数等信息。
3、编写js
<script type="text/javascript">
$(function () {
$("#jqGrid").jqGrid({
url: '<%=path %>/student/allstu.do',
mtype: "post",
datatype: "json",
colModel: [
{ label: '学生编号', name: 'stu_id',key: true, 100,align: 'center' },
{ label: '学生姓名', name: 'stu_name', 100,align: 'center' },
{ label: '性别', name: 'sex', 150,align: 'center' },
{ label: '生日', name: 'birthday', 150,align: 'center'/* , formatter : 'date',
formatoptions: { srcformat : '', newformat :'Y-m-d'} */},
{ label: '学校', name: 'school', 150,align: 'center', sortable: false},
{ label: '操作', name: 'flag', 45, align: 'center', formatter: edit}
],
viewrecords: true, //定义是否要显示总记录数
rowNum: 5, //每页显示的条数
height: 'auto',
rowList: [5,10,20], //用来改变显示记录数
pager: "#jqGridPager" //定义翻页用的导航栏
});
// jqgrid自带的增删改操作的图标，点击可进行相对应的操作
/* $("#jqGrid").jqGrid('navGrid', '#jqGridPager', {
add : false,
del : true,
edit : true,
position : 'left'
}); */
// 由于jqgrid表格并不支持响应式操作，所以需要手动编写代码
// 设置jqgrid的宽度和容器一样
var parent_dom = $("#jqGrid").closest('[class*="col-"]');
$("#jqGrid").jqGrid('setGridWidth', parent_dom.width());
// 改变浏览器窗口大小时
$(window).on('resize.jqGrid', function () {
//重新抓父容器新的width
var parent_dom = $("#jqGrid").closest('[class*="col-"]');
$("#jqGrid").jqGrid('setGridWidth', parent_dom.width());
});
});
// 在表格中添加按钮
function edit(cellvalue, options, rowObject) {
return [
'<button type="button" onclick="show('+options.rowId+')"><i class="fa fa-edit"></i></button>'+
'<button type="button" ><i class="fa fa-trash"></i></button>'
];
}
// 按钮对应的方法
function show(rowid){
alert(rowid);
}
</script>
4、后台数据获取
@ResponseBody
@RequestMapping("/allstu")
public Map<String,Object> getallstu(int page, int rows) throws Exception {
// 获得起始页
int start = rows*page - rows;
// 分页获取数据
Map<String,Object> params = new HashMap<String,Object>();
params.put("pageStart", start);
params.put("pageSize", rows);
List<Student> withPage = stuService.getAllStudentWithPage(params);
// 定义向前台发送数据的map
Map<String,Object> map = new HashMap<String,Object>();
int records = stuService.getstucount();//获取总页数
int totalpage = 0;
int m = records / rows;
int n = records % rows;
// 当结果存在余数时则进行+1
totalpage = (n == 0) ? m : m + 1;
map.put("rows", withPage); //分页获取到的数据
map.put("records", list.size()); //总记录条数
map.put("page", page); //当前页
map.put("total", totalpage); //总页数
map.put("pageSize", rows); //每页记录条数
return map;
}若需要使用分页，并不能单纯得向前台传实体类对象，需要附带一些其他信息。
例如文章开头页面传过来的数据为：
{"total":3,"records":15,"pageSize":5,"page":1,"rows":[{"stu_id":1,"stu_name":"张三","age":0,"birthday":"Dec 31, 1998 12:00:00 AM","sex":"男","school":"西工大"},{"stu_id":2,"stu_name":"王六","age":0,"birthday":"Feb 2, 1999 12:00:00 AM","sex":"女","school":"西安西安"},{"stu_id":3,"stu_name":"六六","age":0,"birthday":"Jan 1, 2000 12:00:00 AM","sex":"女","school":"长安"},{"stu_id":4,"stu_name":"张二","age":0,"birthday":"Jun 12, 1994 12:00:00 AM","sex":"女","school":"陕师范"},{"stu_id":5,"stu_name":"赵六","age":0,"birthday":"Dec 13, 2017 12:00:00 AM","sex":"男","school":"123"}]} 
jqGrid的一个重要的选项jsonReader，jsonReader用于设置如何解析从Server端发回来的json数据。上面表格之所以能够成功解析出来得益于，jsonReader的默认设置。
具体设置可以参考这篇博客
jqGrid简单使用、json格式和jsonReader介绍：https://blog.csdn.net/ainuser/article/details/68482771
至此已经可以绘制出一个简单的jqgrid表格，需要定制一些其他信息的话可以参考api进行修改。