JqGrid 怎么合并行
在使用jqGrid列表控件的时候,有时候会遇到多行多列重复的内容项,如果能把行合并,则列表查看就更为清晰了;如下图:

工具/原料
jqGrid
方法/步骤
一、colModel属性中,增加单元格ID值,以rowId为基础来增加;
代码示例:
colModel: [
{
label: '供应商', name: "SupplierName", width: 200, sortable: false, align: 'center',
cellattr: function (rowId, tv, rawObject, cm, rdata) {
//合并单元格
return 'id=\'SupplierName' + rowId + "\'";
}
},
]
上图斜体加粗部分为给这个td增加ID值;ID值的内容为当前name加上rowId即行号;加上ID值的目的是为了在下面的方法中准确的获取到需要合并的行;
二、在jqgrid的gridComplete的方法中执行对应的合并行的方法:
gridComplete: function () {
MergerStatistics("gridTable", 'SupplierName');
}
如上代码,是在gridComplete这里面执行了MergerStatistics()这个方法;这个方法就是真正的合并行的方法;
三、MergerStatistics()方法代码介绍
function MergerShe(gridName, CellName) {
//得到显示到界面的id集合
var mya = $("#" + gridName + "").getDataIDs();
//当前显示多少条
var length = mya.length;
for (var i = 0; i < length; i++) {
//从上到下获取一条信息
var before = $("#" + gridName + "").jqGrid('getRowData', mya[i]);
//定义合并行数
var rowSpanTaxCount = 1;
for (j = i + 1; j <= length; j++) {
//和上边的信息对比 如果值一样就合并行数+1 然后设置rowspan 让当前单元格隐藏
var end = $("#" + gridName + "").jqGrid('getRowData', mya[j]);
var cellNames = CellName.split(",");
for (var n = 0; n < cellNames.length; n++) {
if (before[cellNames[0]] == end[cellNames[0]] ) {
rowSpanTaxCount++;
$("#" + gridName + "").setCell(mya[j], cellNames[0], '', { display: 'none' });
} else {
rowSpanTaxCount = 1;
break;
}
$("#" + cellNames[0] + "" + mya[i] + "").attr("rowspan", rowSpanTaxCount);//最后合并需要合并的行与合并的行数
}
}
}
}
就会如下图所示:

注意事项
一、注意多行多列合并, MergerStatistics("gridTable", 'SupplierName,列名1,列名2'); 在方法中判断比较值是否相同的地方,相对应的加上列名1、列名2的判断;