jqGrid 滚动加载 或者点击分页加载两种方式

分页的使用场景：当需要展示的字段太多，记录的条数太多的情况下，如果采用一次性加载全部的记录，会导致加载页面缓慢，响应速度慢， 影响系统的流程程度，故所以采用分页的方法加载数据是十分必要的

步骤如下：

jqgrid 分页的原理其实是以post 或get方式向后台发送了请求，携带的几个参数都是固定了，例如page,rows,total,...等等

这些参数需要被后台的Controller 获取到

下面是后台代码：

 JavaScript Code 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71

@ SuppressWarnings( "unchecked")  @ RequestMapping(value = ApiUtil.loadMarketFunds, method = RequestMethod.POST) public CallBack < BasicFund > loadMarketFundds(FundSelectRequest request,  @ RequestParam(value =  "rows", required =  false)Integer rows,      @ RequestParam(value =  "page", required =  false)Integer page,      @ RequestParam(value =  "sidx", required =  false)String sidx,      @ RequestParam(value =  "qwery", required =  false)String qwery,      @ RequestParam(value =  "sord", required =  false)String sord) {     System.out.println( " rows:" + rows +  " page:" + page +  " sidx:" + sidx +  " sord:" + sord +  " qwery:" + qwery);     System.out.println(request);      long t0 = System.currentTimeMillis();      //根据条件查找对应的全市场基金的基金经理     Map < String,     Object > resultMap = basicFundService.loadMarketFunds(request);     List < BasicFund > marketFunds = (List < BasicFund > )resultMap.get( "filterList");     CallBack < BasicFund > back = handListPage(rows, page, sidx, sord, marketFunds);      long tx = System.currentTimeMillis();     log.debug( "loadFundManages spend :" + (tx - t0));      return back; } /**  * jqGrid处理list分页的逻辑  * @param rows  * @param page  * @param sidx  * @param sord  * @param pageList  * @return  */ private < T > CallBack < T > handListPage(Integer rows, Integer page, String sidx, String sord, List < T > pageList) {      if (StringUtils.isNotBlank(sord) && StringUtils.isNotBlank(sidx))     {         SortUtil.sortByBeanFiled(pageList, sidx, sord);     }     Integer size =  0;     Integer totalPage =  0;      if ( null != pageList && pageList.size() >  0)     {         size = pageList.size();          int by = size / rows;         totalPage = size % rows ==  0 ? by : by +  1;          if (page > totalPage)         {             page = totalPage;         }     }     Integer startIndex = (page -  1) * rows;     Integer endIndex = page * rows;     List < T > subList =  new ArrayList <  > ();      if ( null != pageList && pageList.size() >  0)     {         size = pageList.size();          if (startIndex > size)         {             startIndex = size - rows;         }          if (endIndex > size)         {             endIndex = size;         }         subList = pageList.subList(startIndex, endIndex);     }      return  new CallBack < T > (size, page, totalPage, subList); }

排序工具类：

 JavaScript Code 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98

public  static < T >  void sortByBeanFiled(List < T > list, String field, String order) {     logger.debug( "sort list...");     Integer d = order.equals(ASC) ?  1 : - 1;     Collections.sort(list,  new Comparator < T > ()     {          @ Override          public  int compare(T t1, T t2)         {              if ( null != t1 &&  null != t2)             {                 String prop =  null;                 String newField =  null;                 Object value1 =  null;                 Object value2 =  null;                  //如果属性为复合类型Java属性                  if (StringUtils.isNotBlank(field) && field.contains( "."))                 {                     prop = field.substring( 0, field.lastIndexOf( "."));                     newField = field.substring(field.lastIndexOf( ".") +  1);                     Object propBean1 = ReflectUtil.getTypeField(t1, prop);                     Object propBean2 = ReflectUtil.getTypeField(t2, prop);                     value1 = extractJavaBeanPropertyValue(prop, newField, propBean1);                     value2 = extractJavaBeanPropertyValue(prop, newField, propBean2);                 }                  else                 {                     value1 = ReflectUtil.getTypeField(t1, field);                     value2 = ReflectUtil.getTypeField(t2, field);                 }                  if ( null == value1 &&  null != value2)                 {                      return -d;                 }                  else  if ( null != value1 &&  null == value2)                 {                      return d;                 }                  else  if ( null == value1 &&  null == value2)                 {                      return  0;                 }                  else  if ( null != value1 &&  null != value2)                 {                     Integer tempd =  0;                      if (value1  instanceof String)                     {                         tempd = Collator.getInstance(Locale.CHINESE).compare(value1, value2);                     }                      else  if (value1  instanceof Number || value1  instanceof Integer)                     {                         tempd = Integer.valueOf(String.valueOf(value1)) - Integer.valueOf(String.valueOf(value2));                     }                      else  if (value1  instanceof Date)                     {                          try                         {                             tempd = DATE_FORMAT.parse(String.valueOf(value1)).compareTo(DATE_FORMAT.parse(String.valueOf(value2)));                         }                          catch (ParseException e)                         {                             logger.debug( "sortByBeanFiled 日期转换异常");                             e.printStackTrace();                         }                     }                      else                     {                         logger.debug( "sortByBeanFiled 转换其他类型:" + value1.getClass().getName());                     }                      if (tempd >  0)                     {                          return d;                     }                      else  if (tempd <  0)                     {                          return -d;                     }                      return tempd;                 }             }              return  0;         }          private Object extractJavaBeanPropertyValue(String prop, String newField, Object propBean)         {             Object value =  null;              //忽略...              return value;         }     }     ); }

后台的js有两种风格

 JavaScript Code 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78

function initMarketFunds(opts) {      var width = null;      var hidden = $( '#frmTitle').is( ":hidden");      if(hidden){         width = $(window).width()-$( '.pic-bg').width();     } else{         width =$(window).width()-$( '#frmTitle').width()-$( '.pic-bg').width();     }          getHeaderType(clickIndex);      var modelMap ={};      for( var className  in selectMap){          var flag = selectMap[className];          if(flag){             modelMap[className] = clickIndex;         }     }      var defaults = buildRequestParams( true);      var settings = $.extend({}, defaults, opts);      var modelArr = loadModelHeader(modelMap);     $( '#allFundsDiv').empty().html( '<table id="market_table"  width="100%"></table><div id="market_page" style="height:20px;"></div>');     //滚动分页的效果      /*$('#market_table').jqGrid({         url: 'loadMarketFunds.json',         mtype: "POST",         postData:settings,         datatype: "json",         colModel: modelArr,         page: 1,         rowNum: 100,         shrinkToFit: false,         viewrecords: true,         gridview: true,         sortname: 'secuCode',            sortable:false,         scroll: 1,          width:width,         height:600,         loadui: "Disable",         recordtext : "记录 {0} ~ {1} | 总记录数 {2}",//显示记录数的格式         emptyrecords : "无数据",//空记录时的提示信息         pgtext : "第几页 {0} 总页数 {1}",//页数显示格式         pager: "#market_page"     });*/      //点击分页的效果     $( '#market_table').jqGrid({         url:  'loadMarketFunds.json',         mtype:  "POST",         postData:settings,         datatype:  "json",         colModel: modelArr,         rowList: [ 50, 100, 200],               sortname:  'secuCode',                rowNum:  100,         shrinkToFit:  false,         viewrecords:  true,         gridview:  true,         sortable: false,         width:width,         height: 600,         loadui:  "Disable",         recordtext :  "记录 {0} ~ {1} | 总记录数 {2}", //显示记录数的格式         emptyrecords :  "无数据", //空记录时的提示信息         pgtext :  "第几页 {0} 总页数 {1}", //页数显示格式         pager:  "#market_page"     });                //处理多表头     $( '#market_table').setGroupHeaders({         useColSpanStyle:  true,         groupHeaders: [{  "numberOfColumns":  4,  "titleText":  "最新资产配置（%）",  "startColumnName":  "stockRatio" }]     });     jQuery( "#market_table").jqGrid( 'setFrozenColumns');          suitWindows( '#market_table',  '#allFundsDiv',  '#market_page'); }

 JavaScript Code 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

/**  * Java 反射获取对应字段的值  * @param <V>  *  * @param fund  * @param field  * @return  */  @ SuppressWarnings( "unchecked") public  static < T, V > V getTypeField(T t, String field) {      if (StringUtils.isNotBlank(field))     {         Class <  ?  > clazz = t.getClass();          try         {             Field f = clazz.getDeclaredField(field);             f.setAccessible( true);              return (V)f.get(t);         }          catch (Exception e)         {              throw  new BizException(ErrorCodeEnum.REFLECT_FAILED,  "反射获取字段值异常");         }     }      return  null; }

效果如下：