藉由表單查詢，更新 jqGrid 的輸出結果

這是我使用 jQuery 的 jqGrid 遇到的坑。

以下是我的 HTML code 以及處理 jqGrid 的 js code

<form id="search-form">
	<label>Title <input type="text" name="title" /></label>
	<label>Author <input type="text" name="author" /></label>
	<input type="submit" value="送出"/>
</form>

<table id="result"></table>

$("#result").jqGrid({
	url: "/foo/bar.json",
	colNames: ["標題", "作者", "日期"],
	colModel: [
		{name: 'title', index: 'title', sorttype: "string"},
		{name: 'author', index: 'author', sorttype: "string"},
		{name: 'publishDate', index: 'publishDate', sorttype: "date"},
	]
	// 以下略
})

如果要讓表單送出後，更該輸出結果，要用以下的方式

$("#search-form").submit(function(){
	/*
	 * 整理 post data
	 * 使其變成 {title: "Lorem ipsum dolor sit amet", author: "John"} 這種格式的 Object
	 */
	let data = {}
	$(this).serializeArray().forEach(function(params){
		data[params.name] = params.value
	})

	/*
	 * 處理 grid 參數
	 * 如果 $("#result").jqGrid("setGridParam", {postData: data, page: 1}) ，貌似會失敗，所以分兩次處理
	 * 
	 * {page: 1} 的目的是確保重整 table 後，會回到第一頁
	 * 如果不做這件事，假設原本在 page2，更新 table 還是在 page2
	 * 
	 * setGridParam 處理完後，執行 reloadGrid event 才會更新 table
	 */
	$("#result").jqGrid("setGridParam", {postData: data})
	$("#result").jqGrid("setGridParam", {page: 1})
	$("#result").trigger('reloadGrid') 
	
	return false
})

參考資料

• jqGrid Wiki: Options
• jqGrid Wiki: Events