本節介紹jqGrid其他的使用方法，主要是一些基本操作，特殊的數據顯示等。
1 刷新jqGrid數據。
常用到刷新jqGrid數據的情況是，在用到查詢的時候，根據查詢條件，請求數據，並刷新jqGrid表格，使用方式如下：
$("#search_btn").click(function(){
//此處可以添加對查詢數據的合法驗證
var orderId = $("#orderId").val();
$("#list4").jqGrid('setGridParam',{
datatype:'json',
postData:{'orderId':orderId}, //發送數據
page:1
}).trigger("reloadGrid"); //重新載入
});
① setGridParam用於設置jqGrid的options選項。返回jqGrid對象
② datatype為指定發送數據的格式；
③ postData為發送請求的數據，以key:value的形式發送，多個參數可以以逗號”,”間隔；
④ page為指定查詢結果跳轉到第一頁；
⑤ trigger(“reloadGrid”);為重新載入jqGrid表格。
2 無數據的提示信息。
當后台返回數據為空時，jqGrid本身的提示信息在右下角，不是很顯眼
，下面方法將實現在無數據顯示的情況下，在jqGrid表格中間位置提示“無數據顯示”。如下圖：當然，你的div樣式可以設置的更好看些。
，下面方法將實現在無數據顯示的情況下，在jqGrid表格中間位置提示“無數據顯示”。如下圖：當然，你的div樣式可以設置的更好看些。
loadComplete: function() {//如果數據不存在，提示信息 var rowNum = $("#list4").jqGrid('getGridParam','records'); if (rowNum if($("#norecords").html() == null){ $("#list4").parent().append("</pre> <div id="norecords">沒有查詢記錄！</div> <pre>"); } $("#norecords").show(); }else{//如果存在記錄，則隱藏提示信息。 $("#norecords").hide(); } }
① loadComplete 為jqGrid加載完成，執行的方法；
② getGridParam這個方法用來獲得jqGrid的選項值。它具有一個可選參數name，name即代表着jqGrid的選項名，如果不傳入name參數，則會返回jqGrid整個選項options。例：
$("#list4").jqGrid('getGridParam','records');//獲取當前jqGrid的總記錄數；
注意：這段代碼要加在jqGrid的選項設置Option之間，即：$(“#list4″).jqGrid({});代碼之間。且各個option之間加逗號間隔。
3 顯示jqGrid統計信息。
通常統計信息都顯示在jqGrid表格最后一行，分頁控件之上，如下圖：
代碼片段：
$("#list4").jqGrid({
......
colModel:[
{name:'productName',index:'productName',align:'center',sortable:false},
{name:'productAmt',index:'productAmt', align:'center'}
],
footerrow: true,//分頁上添加一行，用於顯示統計信息
......
pager:$('#gridPager'),
gridComplete: function() {//當表格所有數據都加載完成，處理統計行數據
var rowNum = $(this).jqGrid('getGridParam','records');
if(rowNum > 0){
var options = {
url: "test.action",// 默認是form的action，如果寫的話，會覆蓋from的action.
dataType: "json",// 'xml', 'script', or 'json' (接受服務端返回的類型.)
type: "POST",
success: function(data){//成功后調用方法
$("#list4").footerData("set",{productName:"合計",productAmt:data.productAmtSum});
}
};
$("#searchForm").ajaxSubmit(options);
}
}
});
詳細介紹：
3.1jqGrid的options配置； 需要在jqGrid的options中添加如下屬性：
footerrow: true,//分頁上添加一行，用於顯示統計信息
3.2 調用gridComplete方法，當數據加載完成后，處理統計行數據； 3.3調用jqGrid的footerData方法，為統計行賦值：
$("#list4").footerData("set",{productName:"合計",productAmt:data.productAmtSum});
4 jqGrid的數據格式化。
jqGrid中對列表cell屬性格式化設置主要通過colModel中formatter、formatoptions來設置
基本用法：
jQuery("#jqGrid_id").jqGrid({
...
colModel: [
...
{name:'price', index:'price', formatter:'integer', formatoptions:{thousandsSeparator: ','}},
...
]
...
});
formatter主要是設置格式化類型(integer、email等以及函數來支持自定義類型),formatoptions用來設置對應formatter的參數，jqGrid中預定義了常見的格式及其options：
integer
thousandsSeparator： //千分位分隔符,
defaulValue
number
decimalSeparator, //小數分隔符，如”.”
thousandsSeparator, //千分位分隔符，如”,”
decimalPlaces, //小數保留位數
defaulValue
currency
decimalSeparator, //小數分隔符，如”.”
thousandsSeparator, //千分位分隔符，如”,”
decimalPlaces, //小數保留位數
defaulValue,
prefix //前綴，如加上”$”
suffix//后綴
date
srcformat, //source的本來格式
newformat //新格式
email
沒有參數，會在該cell是email加上： mailto:name@domain.com
showlink
baseLinkUrl, //在當前cell中加入link的url，如”jq/query.action”
showAction, //在baseLinkUrl后加入&action=actionName
addParam, //在baseLinkUrl后加入額外的參數，如”&name=aaaa”
target,
idName //默認會在baseLinkUrl后加入,如”.action?id=1″。改如果設置idName=”name”,那么”.action?name=1″。其中取值為當前rowid
checkbox
disabled //true/false 默認為true此時的checkbox不能編輯，如當前cell的值是1、0會將1選中
select
設置下拉框，沒有參數，需要和colModel里的editoptions配合使用
下面是一個使用的例子:
colModel:[ {name:'id', index:'id', formatter: customFmatter}, {name:'name', index:'name', formatter: "showlink", formatoptions:{baseLinkUrl:"save.action",idName: "id", addParam:"&name=123"}}, {name:'price', index:'price', formatter: "currency", formatoptions: {thousandsSeparator:",",decimalSeparator:".", prefix:"$"}}, {name:'email', index:'email', formatter: "email"}, {name:'amount', index:'amount', formatter: "number", formatoptions: {thousandsSeparator:",", defaulValue:"",decimalPlaces:3}}, {name:'gender', index:'gender', formatter: "checkbox",formatoptions:{disabled:false}}, {name:'type', index:'type', formatter: "select", editoptions:{value:"0:無效;1:正常;2:未知"}} ]
其中customFmatter聲明如下：
function customFmatter(cellvalue, options, rowObject){ console.log(cellvalue); console.log(options); console.log(rowObject); return "["+cellvalue+"]"; };
在頁面顯示的效果如下： 
當然還得支持自定義formatter函數，只需要在formatter:customFmatter設置formatter函數，該函數有三個簽名：
function customFmatter(cellvalue, options, rowObject){ } //cellvalue - 當前cell的值 //options - 該cell的options設置，包括{rowId, colModel,pos,gid} //rowObject - 當前cell所在row的值，如{ id=1, name="name1", price=123.1, ...}
當然對於自定義formatter，在修改時需要獲取原來的值，這里就提供了unformat函數，這里見官網的例子：
jQuery("#grid_id").jqGrid({
...
colModel: [
...
{name:'price', index:'price', width:60, align:"center", editable: true, formatter:imageFormat, unformat:imageUnFormat},
...
]
...
});
function imageFormat( cellvalue, options, rowObject ){
return '</pre>
<img src="'+cellvalue+'" alt="" />
<pre>';
}
function imageUnFormat( cellvalue, options, cell){
return $('img', cell).attr('src');
}
5 常見錯誤問題：
chrome報錯：
Uncaught TypeError: Cannot read property ‘integer’ of undefined
IE報錯：
SCRIPT5007: 無法獲取屬性“integer”的值: 對象為 null 或未定義
出現這樣的問題，是由於頁面沒有添加語言文件的引用導致的
解決辦法為：添加語言文件js
<script type="text/javascript" src="js/i18n/grid.locale-cn.js"></script>