前言：專案需要用到表格外掛，本來覺得jquery datatable樣式不錯，後臺發現沒有繼承checkbox等問題，最終轉而使用jqgrid。

專案語言及架構：java spring mvc

1、jqgrid的建立：

jar包地址：http://pan.baidu.com/s/1nutFNvz 密碼：i7ka

2、html程式碼

<div id="jqgrid-wrapper">
	<table id="mygrid" class="table table-striped table-hover">
		<tr>
			<td></td>
		</tr>
	</table>
	<div id="jqgrid-pager"></div>
</div>
 

3.1、初始化

$('#mygrid').jqGrid({
	url : '${pageContext.request.contextPath}/cus/xxx.do',
	postData:{'menuId':$('#menuId').val(),'type':$('#type').val()},
	mtype : "POST",
	contentType : "application/json",
	datatype : "json",
	colModel : [ {
		label : '選擇',
		name : 'id',
		key : true,
		hidden : true
	}, {
		label : '名稱',
		name : 'name'
	}, {
		label : '描述',
		name : 'remark'
	}, {
		label : '建立時間',
		name : 'createTime'
	} ],
	height : '100%',
	pager : 'jqgrid-pager',
	page : "${page}", //初始化查詢頁數
	rowNum : "${rows}",
	rowList : [ 10, 20, 30 ],
	sortname : 'createTime',
	sortable : true,
	sortorder : 'desc',
	jsonReader : {
		root : "formList", // json中代表實際模型資料的入口
		records : "records", // json中代表資料行總數的資料
		page : "page", // json中代表當前頁碼的資料
		total : "total", // json中代表頁碼總數的資料
		repeatitems : false
	},
	multiselect : true,
	onSelectRow : function(rowid,
			status) {
		selId = rowid;
	}
});
 

引數解釋：

colModel：表頭

pager：'jqgrid-pager' 選用jgrid的分頁器

page：頁數，可定義變數（如：列表中點選修改，修改完成後還是回到當前頁）

rowNum：條數

rowList：讓使用者選擇自定義每頁顯示的條目數

sortname：排序欄位

sorttable：是否排序

sortorder：排序方式

jsonReader：這個比較關鍵，就是從後臺傳遞的資料

root ：json中代表實際模型資料的入口

records： json中代表資料行總數的資料

page： json中代表當前頁碼的資料

total ： json中代表頁碼總數的資料

multiselect：支援多條選擇

onSelectRow：獲取選中資料的id，更新和刪除都需要用到

3.2、獲取選中資料的id和當前頁數

// 當前選擇記錄ID值 
var id = $("#mygrid").jqGrid("getGridParam", "selarrrow");   
// 取當前面頁碼
var page = $('#mygrid').getGridParam('page');

/*搜尋*/
$("#searchBtn").click(function(){
	jQuery("#mygrid").jqGrid('setGridParam',{
		url: '${pageContext.request.contextPath}/cus/xxx.do',
		postData:{'searchField':$("#searchField").val()},
		page:1
	}).trigger("reloadGrid");
});

4、後臺

4.1、封裝類傳遞資料，用於之前jsonReader中的變數

public class JqgridListForm implements Serializable{

	private static final long serialVersionUID = 1L;
	
	/* 當前頁數 */
	private int page;
	/* 總頁數 */
	private int total;
	/* 總計錄數  */
	private long records;
	
	private List<?> formList;
	
	public int getPage() {
		return page;
	}
	public void setPage(int page) {
		this.page = page;
	}
	public int getTotal() {
		return total;
	}
	public void setTotal(int total) {
		this.total = total;
	}
	public long getRecords() {
		return records;
	}
	public void setRecords(long records) {
		this.records = records;
	}
	public List<?> getFormList() {
		return formList;
	}
	public void setFormList(List<?> formList) {
		this.formList = formList;
	}

}

public JqgridListForm controllerName(
			@RequestParam(value = "page", defaultValue = "1") String page,
			@RequestParam(value = "rows", defaultValue = "10") String rows,
			@RequestParam(value = "sidx", required = false) String sidx,
			@RequestParam(value = "sord", required = false) String sord,
			@RequestParam(value = "searchField", required = false) String searchField) {
	// 當前頁碼
	int pageNo = Integer.parseInt(page);
	// 顯示條數，預設10條
	int size = 10;
	if (!StringUtils.isEmpty(rows)) {
		size = Integer.parseInt(rows);
	}
	return service.methodName(params);
}

sord：排序方式

這些是關鍵字，必須要這樣命名，否則取不到