最近做項目時要用到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）