jqGrid 复选框分组摘要

Question

我想问某人，当用户选中/取消选中复选框时，是否有机会更改标题中的摘要。我创建了函数来计算总和并将其打印到标签中(此刻我跳过了解决组问题(。

我在某处找到了一些解决方案，例如discart标题并再次生成它，但它仅用于主标题，而不是用于组标题

这是我的示例代码

$(document).ready(function () {
$("#jqGrid").jqGrid({
url: 'data2.json',
mtype: "GET",
datatype: "json",
colModel: [
{ label: 'OrderID', name: 'OrderID', key: true, width: 75 },
					{ label: 'Customer ID', name: 'CustomerID', width: 150 },
{ label: 'Order Date', name: 'OrderDate', width: 150 },
{
label: 'Freight',
name: 'Freight',
width: 150,
formatter: 'number',
summaryTpl: "Total Units {0}", // set the summary template to show the group summary
summaryType: "sum" // set the formula to calculate the summary type
},
{ label: 'Ship Name', name: 'ShipName', width: 150 }
],
loadonce: true,
width: 900,
height: 500,
rowNum: 20,
rowList: [20, 30, 50],
sortname: 'OrderDate',
pager: "#jqGridPager",
viewrecords: true,
multiselect: true,
grouping: true,
userDataOnFooter: true, 
onSelectRow: function (rowId) { handleSelectedRow(rowId); },
groupingView: {
groupField: ["CustomerID"],
groupColumnShow: [true],
groupText: ["<b>{0}</b>"],
groupOrder: ["asc"],
groupSummary: [true],
groupSummaryPos: ['header'],
groupCollapse: false
},
gridComplete: function () {
currids = $(this).jqGrid('getDataIDs');
}
});
});
var totalAmt=0;
function handleSelectedRow(id) {

var jqgcell = jQuery('#jqGrid').getCell(id, 'OrderID');
var amount = jQuery('#jqGrid').getCell(id, 'Freight');
var cbIsChecked = jQuery("#jqg_jqGrid_" + jqgcell).prop('checked');

if (cbIsChecked == true) {
if (amount != null) {
totalAmt = parseInt(totalAmt) + parseInt(amount);
}
} else {
if (amount != null) {
totalAmt = parseInt(totalAmt) - parseInt(amount);
}
}
$("#price").html(totalAmt);

}

Answer 1

我觉得这个要求非常有趣，并准备了一个演示。当然，这个演示需要很多其他的检查和优化，但它是实现需求的一个方向。

有一些值得注意的设置和事件：我假设所有行都被选中，并且在分页、排序等时，我们在 beforeProcessing 事件中重置选择(selectarrrow 参数(。

onSelectRow 事件有点复杂，但这是必需的，因为当前实现

。谢谢你，我们在Guriddo jqGrid中添加新功能和改进的另一个方向。

这是一个演示

和下面的代码：

$(document).ready(function () {
$("#jqGrid").jqGrid({
url: 'data.json',
mtype: "GET",
datatype: "json",
colModel: [
{ label: 'OrderID', name: 'OrderID', key: true, width: 155 },
{ label: 'Customer ID', name: 'CustomerID', width: 70 },
{ label: 'Order Date', name: 'OrderDate', width: 150 },
{ 
label: 'Freight', 
name: 'Freight', 
width: 150,
formatter: 'number',
summaryTpl : "<b>{0}</b>",
summaryType: "sum"
},
{ label: 'Employee ID', name: 'EmployeeID', width: 150 }
],
loadonce:true,
viewrecords: true,
rowList: [20,30,50],
width: 780,
height: 250,
rowNum: 20,
multiselect : true,
sortname: 'OrderDate',
pager: "#jqGridPager",
grouping: true,
beforeProcessing: function(data) {
// reset the seleted rows after any seoring paging and ets.
this.p.selarrrow =[];
// put the new rows as selected 
for(var i=0;i<this.p.rowNum;i++) {
if(data.rows[i]) {
this.p.selarrrow.push(data.rows[i].OrderID);
}
}
return true;
},
preserveSelection : true,
onSelectRow : function( rowid, status, event ) {
var row = this.rows.namedItem( rowid );
// determine the row index of selected row
var index = row.rowIndex;
// determine the level of grouping
var groups = this.p.groupingView.groupField.length;
// groups have specified id 
var groupsid = this.p.id+'ghead_';
var indexdata = [], sums=[], i;
index--;
// loop in reverse order to find the group headers
while(index > 0 || (groups-1) >= 0 ) {
var searchid = groupsid +(groups-1);
// if the current id is a current group
if( this.rows[index] && this.rows[index].id.indexOf(searchid) !== -1) {
groups--;
// save the index of the parent group
indexdata[groups] = this.rows[index].rowIndex;
// put the sum of the Freigth (note that this is index 4)
sums[groups] = $(this.rows[row.rowIndex].cells[4]).text();
}
index--;
}
for(i=0;i<indexdata.length; i++) {
// fet the sum of the group
var suma = $(this.rows[indexdata[i]].cells[3]).text();
// if selected increase
if(status) {
suma = parseFloat(suma) + parseFloat(sums[i]);
} else {
suma = parseFloat(suma) - parseFloat(sums[i]) ;
}
// set the new calcculated value
$(this.rows[indexdata[i]].cells[3]).html( '<b>'+suma.toFixed(2)+'</b>' );
}
},
groupingView: {
groupField: ["CustomerID", "EmployeeID"],
groupColumnShow: [true, true],
groupText: [
"CustomerID: <b>{0}</b>",
"EmployeeID: <b>{0}</b>"
],
groupOrder: ["asc", "asc"],
groupSummary: [true, false],
groupSummaryPos: ['header', 'header'],
groupCollapse: false
}
});
});

Answer 2

感谢您的回答，您的演示正是我所需要的。我试图继续使用我发布的代码，目前我处于阶段，用户仅获得检查记录的总和。如果有人对此解决方案感兴趣，则只需替换以下代码即可。+ 关于复选框和更新网格数据的另一件事，可以选中/取消选中所有复选框的主复选框在总和计算方面有点麻烦，如果用户取消选中主复选框，则总和计算不会重置，然后您可以制作另一个总和，这些总和与以前的计算一起计算。但这可以在代码中修复:)

谢谢你的帮助托尼

var totalAmt = 0;
function handleSelectedRow(id) {
var jqgcell = jQuery('#list').getCell(id, 'id');
var amount = jQuery('#list').getCell(id, 'amount');
var cbIsChecked = jQuery("#jqg_list_" + jqgcell).prop('checked');
var getID = jQuery("#jqg_list_" + jqgcell).closest('tr').attr('id');
if (cbIsChecked == true) {
if (amount != null) {
totalAmt = parseInt(totalAmt) + parseInt(amount);
}
} else {
if (amount != null) {
totalAmt = parseInt(totalAmt) - parseInt(amount);
}
}
grid.jqGrid('footerData', 'set', { name: 'TOTAL', tax: totalAmt });
$("#price").html(totalAmt);

}