这个例子演示了jqGrid如何处理大量的数据。我们已经在后台模拟了12000条数据行。利用ajax，jqGrid只加载这些可见数据。如果想搜索(在搜索框中数据文字，然后回车)，表格将搜索数据发送到服务器然后加载那些只符合过滤条件的数据。如果我们给一列加上索引，速度将提高大约两倍。这种情况下，最重要的是:实例是加载了12000条数据。
HTML代码举例
<html>
<head>
<title>jqGrid 实例</title>
</head>
<body>
···代码省略···
<div class="h">Search By:</div>
<div>
<input type="checkbox" id="autosearch"
onclick="enableAutosubmit(this.checked)"> Enable Autosearch <br />
Code<br /> <input type="text" id="search_cd"
onkeydown="doSearch(arguments[0]||event)" />
</div>
<div>
Name<br> <input type="text" id="item_nm"
onkeydown="doSearch(arguments[0]||event)" />
<button onclick="gridReload()" id="submitButton"
style="margin-left: 30px;">Search</button>
</div>
<br />
<table id="bigset"></table>
<div id="pagerb"></div>
···代码省略···
</body>
</html>
javascript代码举例
$(function(){
pageInit();
});
function pageInit(){
jQuery("#bigset").jqGrid({
url : ctx+'/BigSet',
datatype : "json",
height : 255,
colNames : [ 'Index', 'Name', 'Code' ],
colModel : [
{name : 'item_id',index : 'item_id',width : 65},
{name : 'item',index : 'item',width : 150},
{name : 'item_cd',index : 'item_cd',width : 100}
],
rowNum : 12,
mtype : "POST",
pager : jQuery('#pagerb'),
pgbuttons : false,
pgtext : false,
pginput : false,
sortname : 'item_id',
viewrecords : true,
sortorder : "asc"
});
}
var timeoutHnd;
var flAuto = false;
function doSearch(ev) {
if (!flAuto)
return;
if (timeoutHnd)
clearTimeout(timeoutHnd);
timeoutHnd = setTimeout(gridReload, 500);
}
function gridReload() {
var nm_mask = jQuery("#item_nm").val()||"";
var cd_mask = jQuery("#search_cd").val()||"";
jQuery("#bigset").jqGrid('setGridParam', {
url : ctx+"/BigSet?nm_mask=" + nm_mask + "&cd_mask=" + cd_mask,
page : 1
}).trigger("reloadGrid");
}
function enableAutosubmit(state) {
flAuto = state;
jQuery("#submitButton").attr("disabled", state);
}java servlet代码举例
public class BigSet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public BigSet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doPost(request, response);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
//组织模拟数据
JSONArray jArray = new JSONArray();
jArray.put(new JSONObject("{\"id\":\"1\",\"cell\":[\"1\",\"Lorem\",\"575878\"]}"));
jArray.put(new JSONObject("{\"id\":\"2\",\"cell\":[\"2\",\"Lorem\",\"857450\"]}"));
jArray.put(new JSONObject("{\"id\":\"3\",\"cell\":[\"3\",\"ipsum\",\"292404\"]}"));
jArray.put(new JSONObject("{\"id\":\"4\",\"cell\":[\"4\",\"dolor\",\"814131\"]}"));
jArray.put(new JSONObject("{\"id\":\"5\",\"cell\":[\"5\",\"sit\",\"962077\"]}"));
jArray.put(new JSONObject("{\"id\":\"6\",\"cell\":[\"6\",\"amet,\",\"549801\"]}"));
jArray.put(new JSONObject("{\"id\":\"7\",\"cell\":[\"7\",\"sed\",\"166822\"]}"));
jArray.put(new JSONObject("{\"id\":\"8\",\"cell\":[\"8\",\"in\",\"616758\"]}"));
jArray.put(new JSONObject("{\"id\":\"9\",\"cell\":[\"9\",\"id\",\"550799\"]}"));
jArray.put(new JSONObject("{\"id\":\"10\",\"cell\":[\"10\",\"dictum\",\"763004\"]}"));
jArray.put(new JSONObject("{\"id\":\"11\",\"cell\":[\"11\",\"velit\",\"244985\"]}"));
jArray.put(new JSONObject("{\"id\":\"12\",\"cell\":[\"12\",\"est\",\"525127\"]}"));
String cd_mask = request.getParameter("cd_mask");
String nm_mask = request.getParameter("nm_mask");
JSONArray filterData = new JSONArray();
if(cd_mask!=null && !"".equals(cd_mask) && nm_mask!=null && !"".equals(nm_mask)){
for(int i=0;i<jArray.length();i++){
JSONObject item = jArray.getJSONObject(i);
JSONArray field = item.getJSONArray("cell");
if(field.getString(1).equals(nm_mask) && field.getString(2).equals(cd_mask)){
filterData.put(item);
}
}
}else if(cd_mask!=null && !"".equals(cd_mask)){
for(int i=0;i<jArray.length();i++){
JSONObject item = jArray.getJSONObject(i);
JSONArray field = item.getJSONArray("cell");
if(field.getString(2).equals(cd_mask)){
filterData.put(item);
}
}
}else if(nm_mask!=null && !"".equals(nm_mask)){
for(int i=0;i<jArray.length();i++){
JSONObject item = jArray.getJSONObject(i);
JSONArray field = item.getJSONArray("cell");
if(field.getString(1).equals(nm_mask)){
filterData.put(item);
}
}
}else{
filterData = jArray;
}
String jsondata = "{" +
" \"page\":\"1\"," +
" \"total\":1," +
" \"records\":\""+filterData.length()+"\"," +
" \"rows\":"+filterData.toString()+"}";
response.getWriter().write(jsondata);
}
}
