什么是jqGrid
- jqGrid是一个在jQuery基础上封装一个表格控件，以ajax的方式和服务器端通信。可以使表格的开发更简单。
开发步骤如下
- 首先，先准备好所需的js和css文件，点击这里可以下载，
- 然后引人这些样式文件和js文件，这里我们直接使用整合后的文件，注意如果你的HTML页面引入过Bootstrap的这两个文件的话是需要先将这两个文件引用删除的，否则后面使用jqgrid会报错，
<script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>
<script src="js/bootstrap.js" type="text/javascript"></script>
最后文件引入如下：
<!--引入样式文件-->
<link rel="stylesheet" href="static/bs/css/bootstrap.css" type="text/css">
<link rel="stylesheet" href="static/jqgrid/css/trirand/ui.jqgrid-bootstrap.css"
type="text/css">
<!--引入js功能文件-->
<script src="static/bs/js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="static/bs/js/bootstrap.min.js" type="text/javascript"></script>
<script src="static/jqgrid/js/trirand/i18n/grid.locale-cn.js" type="text/javascript">
</script>
<script src="static/jqgrid/js/trirand/jquery.jqGrid.min.js" type="text/javascript">
</script>
- 开发表格需要两个组件，第一个是table，另一个是pager用于放一些对表格的操作，显示分页等.
// 提供的html元素
<h1>数据表格构建</h1>
<table id="tt"></table>
<!--分页工具栏-->
<div id="pager"></div>
- 分页+工具栏
$('#tt').jqGrid({
url:'emp.json',
datatype:'json',
//引入bootstrap的UI样式,整合bootstrap只需要导入js,css和添加这条语句
styleUI:'Bootstrap',
colNames:['ID','NAME','SALARY','AGE'],
cellEdit:true,
cellurl:'...',
colModel:[
{name:'id'},
{name:'name'},
{name:'salary'},
{name:'age'}
],
autowidth:true,//数据表格是否自适应父容器的大小宽度\
pager:'#pager',// 使用分页工具栏
rowList:[5,10,15,20,50],// 默认每页展示20条
rowNum:5,// 指定默认每页展示的条数，值必须来自rowList中的一个
viewrecords:true,// 是否显示总记录条数
page:1,//指定初始化页码
}).navGrid('#pager',{add:true,edit:true,del:true,search:true,refresh:true});
// 提供的html元素
<h1>数据表格构建</h1>
<table id="tt"></table>
<!--分页工具栏-->
<div id="pager"></div>- 分页数据表格须知：
1.加入分页工具栏后,远程响应json数据格式为:
{"rows":[当前页显示条数],"page":"当前页","total":"总页数","records":"总条数"}
2.默认每页显示记录数 20（可以通过rowNum设置）
3.后台可以使用rows变量接收每页记录数
4.后台可以使用page变量接收当前 页
5.当我们触发上一页、下一页、每页显示条数的列表时，jqGrid会自动按照url指定的路径发送请求，同时会发送请
求参数page和rows
6.我们用MySQL数据库实现分页，SQL语句如下
select * from t_employee limit #{start},#{rows}
start是每页显示的起始条数-1，它等于 （当前页数-1）*每页显示条数，rows就是每页显示的条数， 所以前台给后台传值的时候只需传一个当前页数和每页显示的条数就可以了。@RequestMapping("findByPage")
public Map<String,Object> findByPage(Integer rows,Integer page){
List<Product> products = productService.findByPage(rows, page);
//总条数
List<Product> all = productService.findAll();
int records = all.size();
//总页数
Integer total = null;
if(records%rows == 0){
total = records/rows;
}else{
total = records/rows+1;
}
//存入Map集合
Map<String,Object> map = new HashMap<>();
map.put("rows",products);
map.put("page",page);
map.put("total",total);
map.put("records",records);
return map;
}- 增删改实现
会向后台传递oper参数,后台根据oper判断当前操作类型然后在进行操作。这时候只需加入editurl:' ',指定增删改提交的路径，然后在各个需要修改的name属性后面加入 editable：true属性当然要配合cellEdit:true开启编辑。
$(function () {
$("#tt").jqGrid({
url: "/emp/findByPage",//分页查询提交的路径
datatype: "json",
styleUI:'Bootstrap',
colNames: ['编号', '姓名','工资','年龄','操作'],
cellEdit: true,
editurl: '/emp/operEmp',//增删改提交的路径
colModel: [
{name: 'id'},
{name: 'name',editable : true},
{name: 'salary',editable : true},
{name: 'age',editable : true},
{name: 'operation'}，
],
autowidth: true, //自适应父容器的大小宽度
pager: '#pager',
rowList: [5, 10, 15, 20],
rowNum: 5,
viewrecords: true,
page: 1,
multiselect: true,
rownumbers: true,
hidegrid: true,
height:255,
}).navGrid('#pager', {add:true,edit:true,del:true,search:true,refresh:true})
});- 增删改对应的后台代码如下：
//oper 代表请求的操作是什么 add|del|edit
@RequestMapping("operEmp")
public Map<String,String> operEmp(String oper,Employee employee){
HashMap map = new HashMap();
if ("add".equals(oper)) {
employeeService.save(employee);
map.put("status", "addOk");
return map;
} else if ("del".equals(oper)){
employeeService.delete(employee.getId());
map.put("status", "delOk");
return map;
}else if("edit".equals(oper)){
employeeService.update(employee);
map.put("status", "editOk");
return map;
}else {
map.put("status", "error");
return map;
}
}
- 其他的一些常用功能
添加可编辑的下拉列表单元格
$('#tt').jqGrid({
url:'emp.json',
datatype:'json',
colNames:['ID','NAME','SALARY','AGE'],
cellEdit:true,//开启编辑模式
cellurl:'...',//编辑模式提交的路径，编辑完毕自动发送请求，请求参数为当前行的id和当前编
辑的数据以及操作方式（oper）
/**
注: 当执行grid中增删改时全部使用当前指定的url
-如果是保存 会传递一个参数名为oper值:add
-如果是修改 会传递一个参数名为oper值:edit
-如果是删除 会传递一个参数名为oper值:del
*/
colModel:[
{name:'id'},
{name:'name'},
{name:'salary'},
{name:'age'},
{
name:'deptname',
editable:true,
edittype:'select',
//渲染静态数据
// editoptions:{value:"1:研发部;2:教学部"},
// 加载远程数据渲染下拉列表,要求响应的是一段html元素内容
editoptions:{dataUrl:'...'},
}
],
autowidth:true,//数据表格是否自适应父容器的大小宽度
});formatter属性实现自定义单元格数据展示
$('#tt').jqGrid({
url:'emp.json',
datatype:'json',
colNames:['ID','NAME','SALARY','AGE'],
cellEdit:true,
cellurl:'...',
colModel:[
{name:'id'},
{name:'name'},
{name:'salary'},
{name:'age'},
{
name:'deptname',
// 自定义单元格展示的数据
formatter:function (value,options,row) {
/**
* value : 在远程匹配到的数据
* options: 当前单元格操作属性对象
* row : 当前行的数据对象
*/
//console.log(value, options, row);
//函数的返回值会显示在当前单元格
return '<span style="font-family: 微软雅黑;">'+row.deptName+'</span>';
}
},
//添加、修改时是下拉框
{name: 'status',editable : true,edittype:'select', editoptions: {value: {显示:'显示', 不显示:'不显示'}}}
],
autowidth:true,//数据表格是否自适应父容器的大小宽度
});
其他数据表格属性
toolbar：['true','both'], //用来指定表格的工具栏
/**
使用注意:
1.如果只有一个工具栏则为 “t_”+表格id
2.如果为both 上面工具栏id为“t_”+表格id；下面则为 “tb_”+表格id；
3.$("#t_xx").append("...html元素...");定义工具栏内容
*/
sortname:'id', // 指定默认的排序字段
sortorder:'desc',// 指定默认的排序规则
caption:'员工信息', // 指定表格的标题
height:200,
prmNames:{'search':'sch'},// 自定义默认请求参数的key
rownumbers:true,// 在第一列前显示行号
hiddengrid:true,// 初始状态是否显示表格内容
hidegrid:true, // 是否显示表格的折叠按钮
search:true,//用来指定该列在搜索模式下是否参与搜索
sortable:true,//用来指定该列是否可以参与排序
surl:'...' //当该列为搜索列时使用指定的url请求数据(如果不指定默认使用grid的url属性的值)
jqGrid时间格式转换
实体类上添加注解
@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss",timezone="GMT+8")
@TableField("create_date")
private Date createDate;
