这个例子演示了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); } }
