正文
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();
}
},
...
效果图：
