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; } |
效果如下: