jqGrid
最近做项目时要用到jqGrid,先学习了一下jqGrid的使用方法，现总结如下，先从基本的说起：
1、数据显示：
jqGrid可以解析的数据有很多种，如xml、json等，在这个项目中主要用的就是json数据解析，在这个项目中我学到的jqGrid显示数据的方式有三种，现列举如下：
（1）先定义表格模板，在$(document).reay();中为其加载数据：
//jqgrid表格加载页面
$("#userTable").jqGrid({
datatype:"local",//设置读取的数据格式，json、local、xml等
colNames:['编号','用户名称','手机号码','邮箱','工作职位','创建时间','操作'],//显示的列名
colModel:[//显示模板，注意：模板列数要与colNames中列数相同
{name:'userId',index:'userId',hidden:true},//name与实体类字段名字相同，index用来进行排序，一般写成与name相同，hidden:true代表隐藏该列
{name:'userName',index:'userName',width:130},//width设置宽度
{name:'mobilePhone',index:'mobilePhone',width:130},
{name:'email',index:'email',width:140},
{name:'jobPosition',index:'jobPosition',width:130},
{name:'createDate',index:'createDate',width:130},
{name:'action',index:'action',align:"center",sortable: false,width:105}//sortable: false设置该列不可排序
],
rownumbers:true,//显示行号
width:850,//表格宽度
rownumWidth:50,//设置行号列宽度
height:430,//表格高度
sortname:"userName",//指定默认排序的列
sortorder:"asc",//指定默认排序方式
shrinkToFit:false,//ture，则按比例初始化列宽度。如果为false，则列宽度使用colModel指定的宽度
});
1>在这就把其中两种方式说了，一种就是在上面定义好的var mydata数组，这个数组从后台获取的话，返回的方式可以是两种，一种是字符串，即在后台拼接成一个json格式的字符串，但是在前台解析的时候要先转换成数组形式，使用如下：
$(document).ready(function(){
$.get("user",{},function(responseData){
var dataArray = new Array();
dataArray = eval(responseData);
for(var i=0;i<=mydata.length;i++) {
$("#userTable").jqGrid('addRowData',i+1,mydata[i]);
}
}
});
2>另一种方式就是返回一个List<User>数组，这样就不用再在页面中转换成数组格式了，直接解析即可：
$(document).ready(function(){
$.get("user",{},function(responseData){
for(var i=0;i<=mydata.length;i++) {
$("#userTable").jqGrid('addRowData',i+1,mydata[i]);
}
}
});
（2）使用jqGrid自身请求url，加载数据：
//jqgrid表格加载页面
$("#userTable").jqGrid({
url:"user",//请求的url
datatype:"json",//设置解析的数据格式
colNames:['编号','用户名称','手机号码','邮箱','工作职位','创建时间','操作'],
colModel:[
{name:'userId',index:'userId',hidden:true},
{name:'userName',index:'userName',width:130},
{name:'mobilePhone',index:'mobilePhone',width:130},
{name:'email',index:'email',width:140},
{name:'jobPosition',index:'jobPosition',width:130},
{name:'createDate',index:'createDate',width:130},
{name:'action',index:'action',align:"center",sortable: false,width:105}
],
rownumbers:true,
width:850,
rownumWidth:50,
height:430,
sortname:"userName",//指定默认排序的列
sortorder:"asc",
autowidth:false,
shrinkToFit:false
});
2、分页，首先需要定义一个div,如<div id="pager"></div>，用来作为jqGrid的分页栏，数据分页需要向后传递两个参数，当前页和每页显示的记录个数：
$("#userTable").jqGrid({
url:"user",
datatype:"json",
colNames:['编号','用户名称','手机号码','邮箱','工作职位','创建时间','操作'],
colModel:[
{name:'userId',index:'userId',hidden:true},
{name:'userName',index:'userName',width:130},
{name:'mobilePhone',index:'mobilePhone',width:130},
{name:'email',index:'email',width:140},
{name:'jobPosition',index:'jobPosition',width:130},
{name:'createDate',index:'createDate',width:130},
{name:'action',index:'action',align:"center",sortable: false,width:105}
],
rownumbers:true,
width:850,
rownumWidth:50,
height:430,
sortname:"userName",
sortorder:"asc",
autowidth:false,
shrinkToFit:false,
//分页
pager:'#pager',
viewrecords:true,
rowNum:10,
rowList:[10,20,30],
prmNames:{//向后台传递的参数
page:"page.currentPage",
rows:"page.pageSize"
},
jsonReader:{
root:'datas',
cell:'',
page:"page.currentPage",
total:"page.totalPage",
records:"page.rowCount",
repeatitems:false//该属性设置可以不必严格按照后台返回的数据顺序读取
}).jqGrid('navGrid','#pager',{edit:false,add:false,del:false,search:false,refresh:false});//设置分页栏中的属性
3、在后台需要有一个Page对象，而且分页的话需要返回一个PageList<User>格式的数组：
private Page page;//get、set方法
private PageList<User> userList;//get、set方法
4、排序：
数据加载完毕，默认每列可以排序，也可以通过,sortable: false属性设置不可排序，点击jqGrid每列标题，jqGrid会自动向后台传递两个参数，sidx和sord，sidx代表排序的列，sord代表排序规则，而且每点击一次sord都会自动更改，如会在asc或desc之间进行切换。
后台实现：
//排序
private String sidx;
private String sord;//get、set方法
userList = userService.getUserPageList(sidx, sord, page);
5、为数据添加编辑、删除操作：
在属性中添加
gridComplete: function(){
var userIds = $("#userTable").jqGrid('getCol','userId',false);//获取某列的值
var ids = $("#userTable").jqGrid('getDataIDs');//获取所有行号
for(var i=0;i < userIds.length;i++){
if(editShow){
be = "<a href=\"javascript:void(0);\" onclick=\"editUser('"+userIds[i]+"')\" >编辑</a> "; //editUser为自己定义的function
}else{
be = "";
}
ce = "<a href=\"javascript:void(0);\" onclick=\"delUser('"+userIds[i]+"','"+ids[i]+"')\" >删除</a>"; //delUser为自己定义的function
$("#userTable").jqGrid('setRowData',ids[i],{action:be+ce});
}
}
6、其它一些操作：
$("#userTable").jqGrid("delRowData",rowId);//根据行号删除某行数据
$("#userTable").jqGrid('setGridParam',{postData:{"organize.organizeId":""}}).trigger('reloadGrid'); //触发重新加载事件，并传递参数organize.organizeId
//获取某行数据,交换该两行数据
var rowIdData = $("#organizeTable").getRowData(rowId);
var rowId1Data = $("#organizeTable").getRowData(rowId1);
$("#organizeTable").setRowData(rowId,rowId1Data);
$("#organizeTable").setRowData(rowId1,rowIdData);
7、还有在这当中学到的其它知识：
（1）事务：在进行多表操作时须用到事务，在这个项目中我的解决方案是：在serviceImpl中方法前添加@Transactional标记，然后在Controller中使用try/catch进行捕捉
（2）
