使用JQGrid 合并单元格相关注意问题

最新推荐文章于 2024-01-09 16:25:07 发布

离散小维

最新推荐文章于 2024-01-09 16:25:07 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： JS

本文链接：https://blog.youkuaiyun.com/weixin_37627441/article/details/80774480

JS 专栏收录该内容

19 篇文章

订阅专栏

在使用JQGrid进行单元格合并时，可能会遇到显示错位的问题。关键在于检查列定义中的'label'属性，如果设置了'key: true'，这可能导致合并异常。移除或调整这个配置可以解决单元格错位的状况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery(function($){
	var TempGrid = $.extend(true,{},BaseJqGrid,{
		resizeHandle:"#searchForm",
		pager: "#pager", //分页工具栏  
	    url: _path + '/.html?doType=query', //这是Action的请求地址  
	    multiselect : false,
	    colModel:[
                {label:'选择',name:'sel',index:'sel',width:'60px',align:'center',sortable:false,
	        	formatter:function(cellvalue, options, rowObject){
	        		return '<input type="checkbox" name="checkId" value="' + rowObject.njdm_id + "_" + rowObject.zyh_id +'" />';
				},
				cellattr: function(rowId, tv, rawObject, cm, rdata) {
	    	 		return 'id=\'sel' + rowId + "\'value=\'njdm_id_zyh_id"+rawObject.njdm_id+rawObject.zyh_id+"\' temp=\'"+rawObject.zyh_id+"\'";
				}
			},
			{label:'年级',name:'njmc', index:'njmc',align:'center',width:'150px',sortable:false,
				cellattr: function(rowId, tv, rawObject, cm, rdata) {
	            	return 'id=\'njmc' + rowId + "\'value=\'njmc"+rawObject.njdm_id+rawObject.zyh_id+rawObject.njmc+"\'temp=\'"+rawObject.njmc+"\'";
	            }
			},
			{label:'专业代码',name:'zydm', index:'zydm',align:'center',width:'150px',sortable:false,
				cellattr: function(rowId, tv, rawObject, cm, rdata) {
	            	return 'id=\'zydm' + rowId + "\'value=\'zydm"+rawObject.njdm_id+rawObject.zyh_id+rawObject.zydm+"\'temp=\'"+rawObject.zydm+"\'";
	            }
			},
			
		],
		sortname: 'njdm_id,zyh_id,sqzyh_id', //首次加载要进行排序的字段 
	 	sortorder: 'asc',
	 	gridComplete: function() {
			Merger2("tabGrid", 'sel');
        		Merger2("tabGrid", 'njmc');
		        Merger2("tabGrid", 'zydm');

	 	}
	});
	$("#tabGrid").loadJqGrid(TempGrid);
	bdan();
});



//单元格合并公共调用方法
function Merger2(gridName, CellName) {
    //得到显示到界面的id集合
    var mya = jQuery("#" + gridName + "").getDataIDs();
    //当前显示多少条
    var length = mya.length;   
    for (var i = 0; i < length; i++) {
        //从上到下获取一条信息
    	var before = jQuery("#" + CellName + "" + mya[i] + "").attr("value");
        //定义合并行数
        var rowSpanTaxCount = 1;
        for (j = i + 1; j <= length; j++) {
            //和上边的信息对比 如果值一样就合并行数+1 然后设置rowspan 让当前单元格隐藏
        	 var end = jQuery("#" + CellName + "" + mya[j] + "").attr("value");
        	 if(CellName=='sel'||CellName=='njmc'||CellName=='zydm'||CellName=="zymc")
        	 {
        		 var endTemp = jQuery("#" + CellName + "" + mya[j] + "").attr("temp");
        		 if(endTemp=='null'||endTemp=='undefined')
        		 {
        			 end=before;
        		 }
        	 }
        	 if (before == end) {
                rowSpanTaxCount++;
                jQuery("#" + gridName + "").setCell(mya[j], CellName, '', { display: 'none' });
            } else {
                rowSpanTaxCount = 1;
                break;
            }  
            jQuery("#" + CellName + "" + mya[i] + "").attr("rowspan", rowSpanTaxCount);
        }
        
    }
}
}

使用jqGrid 合并单元格的时候需要注意如果出现单元格错位等异常情况可排查再label 中是否写入key:true 这个参数了，

这个配置会导致合并单元格错位的情况