1、参考jqgrid官方的事件和方法
https://blog.mn886.net/jqGrid/
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods
http://www.trirand.com/blog/?page_id=6
2、Demo如下:
代码看下面:
3.在项目中的应用
//初始化DataTables对象
$('#dataGrid').dataGrid({
searchForm: $("#searchForm"),
autoGridWidth:false,
columnModel: [
{header:'ID', name:'lineNo',index:'a.line_no', width:90, align:"center",hidden:true},
{header:'${i18n("交货通知单号")}', name:'orderNo',index:'a.order_no', width:90, align:"center",sortable:false,cellattr: function(rowId, tv, row, cm, val) {
//合并单元格
return 'id=\'orderNo' + rowId + "\'";
}},
{header:'${i18n("项次")}', name:'orderItem',index:'a.order_item', width:50,sortable:false, align:"center"},
{header:'${i18n("出货数量")}', name:'shipedqty',index:'a.shipedqty', width:90,sortable:false, align:"center"},
{header:'${i18n("预计出货时间")}', name:'etd',index:'a.etd', width:130, sortable:false,align:"center",cellattr: function(rowId, tv, row, cm, val) {
//合并单元格
return 'id=\'etd' + rowId + "\'";
}},
{header:'${i18n("仓库代码")}', name:'facilityCd',index:'a.fromfacility_cd', width:90,sortable:false, align:"center"},
{header:'${i18n("备注")}', name:'remark',index:'a.remark', width:90,sortable:false, align:"center"}
],
dataId: 'lineNo',
showRownum: true,
showCheckbox: true,
// 加载成功后执行事件
ajaxSuccess: function(data){
MergerRowspan("dataGrid", 'orderNo');
MergerRowspanToOther("dataGrid", 'orderNo','shippedDate');
MergerRowspanToOther("dataGrid", 'orderNo','etd');
}
});
//公共调用方法合并单元格(无需修改)
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);
}
}
}
//根据某一栏位值去合并另一栏位(根据cellName和并otherCellName,上边举例根据交货通知单号 合并预出货日期单元格)
function MergerRowspanToOther(gridName, CellName,otherCellName) {
//得到显示到界面的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], otherCellName, '', { display: 'none' });
} else {
rowSpanTaxCount = 1;
break;
}
$("#" + otherCellName + "" + mya[i] + "").attr("rowspan", rowSpanTaxCount);
}
}
}
//公共调用方法合并单元格(根据需要修改修改)
function MergerColspan(gridName,rowId,id,CellName) {
$("#" + gridName + "").setCell(rowId, id, '', { display: 'none' });
$("#" + CellName + "" + rowId + "").attr("colspan", 2);
}
参考博客:https://blog.youkuaiyun.com/zsq520520/article/details/53375438