Jqgrid合并单元格，左右合并，上下合并
先看样例，下图为普通html表格的合并单元格，代码在下面，把他保存为html文件打开就行
纵向合并：rowspan:a合并a行并表示，需要把后面a-1的单元格隐藏display:none
横向合并：colspan:a合并a行并表示 需要把后面a-1的单元格隐藏display:none
index.html
表格显示
1
3
4
5
6
7
8
9
11
12
之后我们来说jqgrid的合并
原理其实是一样的，只是jqgrid是动态加载数据的，所以我们得动态的给每个需要合并的单元格设定id
cellattr: function(rowId, tv, rawObject, cm, rdata) {
//合并单元格
return 'id=\'id' + rowId + "\'";
}之后是jqgrid完成后自动调用的一个方法：
gridComplete: function() {
//在gridComplete调用合并方法
var gridName = "gridTable";
//动态合并纵行
MergerRowspan(gridName, 'id');
//写死合并横行（因为横行一般是我们定义的固定数，
//所以你可以根据我下面的例子自己加条件，合并哪些横行，我这里就写死了，哈哈）
MergerColspan(gridName,8, 'id','userName');
}这里是上面调用函数的代码
合并纵行无需修改，直接调用
//公共调用方法合并单元格（无需修改）
function MergerRowspan(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]);
if (before[CellName] == end[CellName]) {
rowSpanTaxCount++;
$("#" + gridName + "").setCell(mya[j], CellName, '', { display: 'none' });
} else {
rowSpanTaxCount = 1;
break;
}
$("#" + CellName + "" + mya[i] + "").attr("rowspan", rowSpanTaxCount);
}
}
}合并横行，可以根据需要重写这个方法
//公共调用方法合并单元格（根据需要修改修改）
function MergerColspan(gridName,rowId,id,CellName) {
$("#" + gridName + "").setCell(rowId, id, '', { display: 'none' });
$("#" + CellName + "" + rowId + "").attr("colspan", 2);
}就是这样了，下面贴一下完整代码和示例
示例：
html
jqgrid
js
$(function(){
jQuery("#gridTable").jqGrid({
datatype: "local",
height: 250,
colNames:['编号','用户名', '性别', '邮箱', 'QQ','手机号','出生日期'],
colModel:[
{name:'id',index:'id', width:60, sorttype:"int",
cellattr: function(rowId, tv, rawObject, cm, rdata) {
//合并单元格
return 'id=\'id' + rowId + "\'";
}},
{name:'userName',index:'userName', width:90,cellattr: function(rowId, tv, rawObject, cm, rdata) {
//合并单元格
return 'id=\'userName' + rowId + "\'";
}},
{name:'gender',index:'gender', width:90},
{name:'email',index:'email', width:125,sorttype:"string"},
{name:'QQ',index:'QQ', width:100},
{name:'mobilePhone',index:'mobilePhone', width:120},
{name:'birthday',index:'birthday', width:100, sorttype:"date"}
],
sortname:'id',
sortorder:'asc',
viewrecords:true,
rowNum:5,
rowList:[5,10,15],
pager:"#gridPager",
caption: "第一个jqGrid例子",
gridComplete: function() {
//在gridComplete调用合并方法
var gridName = "gridTable";
MergerRowspan(gridName, 'id');
MergerColspan(gridName,8, 'id','userName');
}
}).navGrid('#pager2',{edit:false,add:false,del:false});
var mydata = [
{id:"1",userName:"polaris",gender:"男",email:"[email protected]",QQ:"33334444",mobilePhone:"13223423424",birthday:"1985-10-01"},
{id:"1",userName:"李四",gender:"女",email:"[email protected]",QQ:"222222222",mobilePhone:"13223423",birthday:"1986-07-01"},
{id:"3",userName:"王五",gender:"男",email:"[email protected]",QQ:"99999999",mobilePhone:"1322342342",birthday:"1985-10-01"},
{id:"4",userName:"马六",gender:"女",email:"[email protected]",QQ:"23333333",mobilePhone:"132234662",birthday:"1987-05-01"},
{id:"5",userName:"赵钱",gender:"男",email:"[email protected]",QQ:"22222222",mobilePhone:"1343434662",birthday:"1982-10-01"},
{id:"6",userName:"小毛",gender:"男",email:"[email protected]",QQ:"4333333",mobilePhone:"1328884662",birthday:"1987-12-01"},
{id:"7",userName:"小李",gender:"女",email:"[email protected]",QQ:"21122323",mobilePhone:"13220046620",birthday:"1985-10-01"},
{id:"8",userName:"王先生",gender:"男",email:"[email protected]",QQ:"242424366",mobilePhone:"1327734662",birthday:"1988-12-01"},
{id:"9",userName:"孙先",gender:"男",email:"[email protected]",QQ:"76454533",mobilePhone:"132290062",birthday:"1989-11-21"}
];
for(var i=0;i<=mydata.length;i++)
jQuery("#gridTable").jqGrid('addRowData',i+1,mydata[i]);
//公共调用方法合并单元格（无需修改）
function MergerRowspan(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]);
if (before[CellName] == end[CellName]) {
rowSpanTaxCount++;
$("#" + gridName + "").setCell(mya[j], CellName, '', { display: 'none' });
} else {
rowSpanTaxCount = 1;
break;
}
$("#" + CellName + "" + mya[i] + "").attr("rowspan", rowSpanTaxCount);
}
}
}
//公共调用方法合并单元格（根据需要修改修改）
function MergerColspan(gridName,rowId,id,CellName) {
$("#" + gridName + "").setCell(rowId, id, '', { display: 'none' });
$("#" + CellName + "" + rowId + "").attr("colspan", 2);
}
});
其他的引用就自己下了，这里不好上传。