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();
                    }
                },
            ...

 

       

效果圖：