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

来源：互联网发布：网络打印机老是脱机编辑：程序博客网时间：2024/05/30 04:04

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

步骤如下：

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

//点击分页的效果
    $('#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;
}

效果如下：

阅读全文

0 0

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

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