24jqGrid -搜索大数据

这个例子演示了jqGrid如何处理大量的数据。我们已经在后台模拟了12000条数据行。利用ajax，jqGrid只加载这些可见数据。如果想搜索(在搜索框中数据文字，然后回车)，表格将搜索数据发送到服务器然后加载那些只符合过滤条件的数据。如果我们给一列加上索引，速度将提高大约两倍。这种情况下，最重要的是:实例是加载了12000条数据。

HTML代码举例

  
    jqGrid 实例
  
  
    ···代码省略···
    
Search By:
    

       Enable Autosearch 
      Code 
    
    

      Name 
      Search
    
    
    
    

    ···代码省略···
  

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