jqGrid实现当前页列合计与总计

当前页列合计

 

 js代码如下:

 

 ...
                footerrow: true,
                gridComplete: function () {
                    var rowNum = parseInt($(this).getGridParam('records'), 10);
                    if (rowNum > 0) {
                            $(".ui-jqgrid-sdiv").show();
                            var Hits = jQuery(this).getCol('Hits', false, 'sum');
                            $(this).footerData("set", { "Source": "<font color='red'>当前页点击合计<font>", "Hits": "<font color='red'>" + Hits + "<font>"});
                      } else {
                        $(".ui-jqgrid-sdiv").hide();
                    }
                },
                userDataOnFooter: true,
                ...

 设置footerrow: true,userDataOnFooter: true,在gridComplete中用jQuery(this).getCol('Hits', false, 'sum')计算合计就行，"Hits"表示要合计的列。

 

 

总列合计

 

实现方法可以在后台计算好后传到前台，这是最简单的做法。

 

本次介绍是修改"jqGrid.js"文件，让其直接支持getGridParam('新添加的属性名')方法，这样在其他列表中也可以直接使用了。

 

由于是直接是生产环境，就直接对"jqGrid.min.js"改动如下：

 

     1.在 d.p.records = y($.jgrid.getAccessor(a, g.records))后添加 d.p.totalSum = y($.jgrid.getAccessor(a, g.totalSum))。

     2.在 d.p.jsonReader = $.extend(!0, { root: "rows", page: "page", total: "total", 后添加 totalSum: "totalSum"。

     3.在 d.p.localReader = $.extend(!0, { root: "rows", page: "page", total: "total", 后添加 totalSum: "totalSum " 。

 

 

 具体做法是在后台给jqGrid对象增加一个某列合计的属性，再在前台直接通过$(this).getGridParam('新添加的属性名')取出，代码示例如下:

 

  ArtJqGridResult<ExtArticle> jqGridPage = new ArtJqGridResult<ExtArticle>();
            jqGridPage.page = pageIndex;
            jqGridPage.records = totalRecord;
            jqGridPage.rows = userlist;
            jqGridPage.pageSize = pageSize;
            jqGridPage.totalSum = hitsSum;
            return Json(jqGridPage, JsonRequestBehavior.AllowGet);

前台在GridComplete中通过parseInt($(this).getGridParam('totalSum'))取出就行。

 

代码如下：

 

...
             gridComplete: function () {
                    var rowNum = parseInt($(this).getGridParam('records'), 10);
                    if (rowNum > 0) {
                            $(".ui-jqgrid-sdiv").show();
                            var Hits = jQuery(this).getCol('Hits', false, 'sum');
                            var hitsSum = parseInt($(this).getGridParam('totalSum'));
                            $(this).footerData("set", { "Source": "<font color='red'>当前页点击合计<font>", "Hits": "<font color='red'>" + Hits + "<font>", "CreateUser": "<font color='red'>总点击合计<font>", "CreateDate": "<font color='red'>" + hitsSum + "<font>" });
                      } else {
                        $(".ui-jqgrid-sdiv").hide();
                    }
                },
            ...

效果图：