jqgrid冻结前后列

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/qq_33871182/article/details/102744894

jqgrid冻结列3步设置：

cellEdit=true的时候frozencolumn是无效

第一步设置colModel 列内的 frozen: true；

第二步设置表格初始时宽度 shrinkToFit: false,

第三步在最后设置 jQuery("#table").jqGrid(‘setFrozenColumns’);冻结前列
或
第三步在最后设置 jQuery("#table").jqGrid(‘setTableFrozenColumns’);冻结前后列

var _colmodel=[ {name:"id",index:"id", width:80,hidden:true,frozen : true,tfixed: 'left'},//冻结列，从第一列开始frozen : true,tfixed: 'left'
{name:"operate",index:"operate",frozen : true,tfixed: 'right',}];//冻结列，从最后一列开始frozen : true,tfixed: 'right'

在源码里添加方法setTableFrozenColumns

setTableFrozenColumns : function () {
		return this.each(function() {
			if ( !this.grid ) {return;}
			var $t = this, cm = $t.p.colModel,i=0,l=0, len = cm.length, maxfrozen = -1,maxleftfrozen = 0, maxrightfrozen = 0, frozen= false,leftarr=[],rightarr=[];
			// TODO treeGrid and grouping  Support
			if($t.p.subGrid === true || $t.p.treeGrid === true || $t.p.cellEdit === true || $t.p.sortable || $t.p.scroll )
			{
				return;
			}
			if($t.p.multiselect) { i++;}
			if($t.p.rownumbers) { i++;}
			
			for (var l=0;l<len;l++ ) {
				if (cm[l].frozen === true && cm[l].tfixed === 'left') {
					maxleftfrozen =i;
					maxleftfrozen ++;
					frozen = true;
				}
				if (cm[l].frozen === true && cm[l].tfixed === 'right') {
					maxrightfrozen =l - 1;
					maxrightfrozen ++;
					frozen = true;
				}
			}
			// get the max index of frozen 
			while(i<len)
			{

				// from left, no breaking frozen
				if(cm[i].frozen === true)
				{
					frozen = true;
					maxfrozen = i;
				} else {
					break;
				}
				i++;
			}
			if( maxfrozen>=0 && frozen) {
				var top = $t.p.caption ? $($t.grid.cDiv).outerHeight() : 0,
				hth = $(".ui-jqgrid-htable","#gview_"+$.jgrid.jqID($t.p.id)).height();
				//headers
				if($t.p.toppager) {
					top = top + $($t.grid.topDiv).outerHeight();
				}
				if($t.p.toolbar[0] === true) {
					if($t.p.toolbar[1] !== "bottom") {
						top = top + $($t.grid.uDiv).outerHeight();
					}
				}
				
				//top:'+top+'px;
				$t.grid.leftfhDiv = $('<div style="position:absolute;left:0px;top:1px; " class="frozen-div ui-state-default ui-jqgrid-hdiv left-frozen-hdiv"></div>');
				$t.grid.leftfbDiv = $('<div style="position:absolute;left:0px;top:'+(parseInt(top,10)+parseInt(hth,10))+'px;overflow-y:hidden;    z-index: 11;background-color: #fff;" class="frozen-bdiv ui-jqgrid-bdiv left-frozen-bdiv"></div>');
				$t.grid.rightfhDiv = $('<div style="position:absolute;right:0px;top:0px; " class="frozen-div ui-state-default ui-jqgrid-hdiv right-frozen-hdiv"></div>');
				$t.grid.rightfbDiv = $('<div style="position:absolute;right:0px;top:'+(parseInt(top,10)+parseInt(hth,10))+'px;overflow-y:hidden;  z-index: 11;background-color: #fff;" class="frozen-bdiv ui-jqgrid-bdiv right-frozen-bdiv"></div>');
				$("#gview_"+$.jgrid.jqID($t.p.id)).append($t.grid.leftfhDiv);
				$("#gview_"+$.jgrid.jqID($t.p.id)).append($t.grid.rightfhDiv);
				var lefthtbl = $(".ui-jqgrid-htable","#gview_"+$.jgrid.jqID($t.p.id)).clone(true);
				var righthtbl = $(".ui-jqgrid-htable","#gview_"+$.jgrid.jqID($t.p.id)).clone(true);
				
				// groupheader support - only if useColSpanstyle is false
				if($t.p.groupHeader) {
					$("tr.jqg-first-row-header, tr.jqg-third-row-header", lefthtbl).each(function(){
						$("th:gt("+maxfrozen+")",this).remove();
					});
					var swapfroz = -1, fdel = -1, cs, rs;
					$("tr.jqg-second-row-header th", lefthtbl).each(function(){
						cs= parseInt($(this).attr("colspan"),10);
						rs= parseInt($(this).attr("rowspan"),10);
						if(rs) {
							swapfroz++;
							fdel++;
						}
						if(cs) {
							swapfroz = swapfroz+cs;
							fdel++;
						}
						if(swapfroz === maxfrozen) {
							return false;
						}
					});
					if(swapfroz !== maxfrozen) {
						fdel = maxfrozen;
					}
					$("tr.jqg-second-row-header", lefthtbl).each(function(){
						$("th:gt("+fdel+")",this).remove();
					});
				} else {
					$("tr",lefthtbl).each(function(){
						$("th:gt("+maxleftfrozen+")",this).remove();
					});
					$("tr",righthtbl).each(function(){
						$("th:lt("+maxrightfrozen+")",this).remove();
					});
				}
				$(lefthtbl).width(1);
				$(righthtbl).width(1);
				// resizing stuff
				$($t.grid.leftfhDiv).append(lefthtbl)
				.mousemove(function (e) {
					if($t.grid.resizing){ $t.grid.dragMove(e);return false; }
				});
				$($t.grid.rightfhDiv).append(righthtbl)
				.mousemove(function (e) {
					if($t.grid.resizing){ $t.grid.dragMove(e);return false; }
				});
				$($t).bind('jqGridResizeStop.setTableFrozenColumns', function (e, w, index) {
					var rhth = $(".ui-jqgrid-htable",$t.grid.leftfhDiv);
					
					$("th:eq("+index+")",rhth).width( w ); 
					var btd = $(".ui-jqgrid-btable",$t.grid.leftfbDiv);
					$("tr:first td:eq("+index+")",btd).width( w ); 
				});
				// sorting stuff
				$($t).bind('jqGridSortCol.setTableFrozenColumns', function (e, index, idxcol) {

					var previousSelectedTh = $("tr.ui-jqgrid-labels:last th:eq("+$t.p.lastsort+")",$t.grid.leftfhDiv), newSelectedTh = $("tr.ui-jqgrid-labels:last th:eq("+idxcol+")",$t.grid.leftfhDiv);

					$("span.ui-grid-ico-sort",previousSelectedTh).addClass('ui-state-disabled');
					$(previousSelectedTh).attr("aria-selected","false");
					$("span.ui-icon-"+$t.p.sortorder,newSelectedTh).removeClass('ui-state-disabled');
					$(newSelectedTh).attr("aria-selected","true");
					if(!$t.p.viewsortcols[0]) {
						if($t.p.lastsort !== idxcol) {
							$("span.s-ico",previousSelectedTh).hide();
							$("span.s-ico",newSelectedTh).show();
						}
					}
				});
				
				// data stuff
				//TODO support for setRowData
				$("#gview_"+$.jgrid.jqID($t.p.id)).append($t.grid.leftfbDiv);
				$("#gview_"+$.jgrid.jqID($t.p.id)).append($t.grid.rightfbDiv);
				$($t.grid.bDiv).scroll(function () {
					$($t.grid.leftfbDiv).scrollTop($(this).scrollTop());
					$($t.grid.rightfbDiv).scrollTop($(this).scrollTop());
				});
				if($t.p.hoverrows === true) {
					$("#"+$.jgrid.jqID($t.p.id)).unbind('mouseover').unbind('mouseout');
				}
				$($t).bind('jqGridAfterGridComplete.setTableFrozenColumns', function () {
					$("#"+$.jgrid.jqID($t.p.id)+"_frozen").remove();
					$("#"+$.jgrid.jqID($t.p.id)+"_rightfrozen").remove();
					/*console.log($($t.grid.leftbDiv).height()-16)
					$($t.grid.leftfbDiv).height($($t.grid.leftbDiv).height()-16);
					$($t.grid.rightfbDiv).height($('.left-frozen').height());*/
					var leftbtbl = $("#"+$.jgrid.jqID($t.p.id)).clone(true);
					var rightbtbl = $("#"+$.jgrid.jqID($t.p.id)).clone(true);
					$("tr[role=row]",leftbtbl).each(function(){
						$("td[role=gridcell]:gt("+maxleftfrozen+")",this).remove();
					});
					$("tr[role=row]",rightbtbl).each(function(){
						$("td[role=gridcell]:lt("+maxrightfrozen+")",this).remove();
					});

					$(leftbtbl).width(1).attr("id",$t.p.id+"_frozen");
					$(rightbtbl).width(1).attr("id",$t.p.id+"_rightfrozen");
					$($t.grid.leftfbDiv).append(leftbtbl);
					$($t.grid.rightfbDiv).append(rightbtbl);
					if($t.p.hoverrows === true) {
						$("tr.jqgrow", "#"+$.jgrid.jqID($t.p.id)).hover(function(){
						 $(this).addClass("ui-state-hover"); 
						 // $("#"+$.jgrid.jqID(this.id)).addClass("ui-state-hover");
						 $("#"+$.jgrid.jqID(this.id), "#"+$.jgrid.jqID($t.p.id)+"_frozen").addClass("ui-state-hover");
						 $("#"+$.jgrid.jqID(this.id), "#"+$.jgrid.jqID($t.p.id)+"_rightfrozen").addClass("ui-state-hover");
						},function(){ 
						 $(this).removeClass("ui-state-hover"); 
						 $("#"+$.jgrid.jqID(this.id), "#"+$.jgrid.jqID($t.p.id)+"_frozen").removeClass("ui-state-hover");
						 $("#"+$.jgrid.jqID(this.id), "#"+$.jgrid.jqID($t.p.id)+"_rightfrozen").removeClass("ui-state-hover");
						 // $("#"+$.jgrid.jqID(this.id), "#"+$.jgrid.jqID($t.p.id)+"_leftfrozen", "#"+$.jgrid.jqID($t.p.id)+"_rightfrozen").removeClass("ui-state-hover");
						});
					}
					leftbtbl=null;
					rightbtbl=null;
				});
				if(!$t.grid.hDiv.loading) {
					$($t).triggerHandler("jqGridAfterGridComplete");
				}
				$t.p.frozenColumns = true;
			}
		});
	},

修改源码
2196行:方法setHeadCheckBox

setHeadCheckBox = function ( checked ) {
//追加代码
			var rightfid = ts.p.frozenColumns ? ts.p.id+"_rightfrozen" : "";
			if(rightfid) {
				$('#cb_'+$.jgrid.jqID(ts.p.id),ts.grid.fhDiv)[ts.p.useProp ? 'prop': 'attr']("checked", checked);
			}
		},

2676行 方法getColumnHeaderIndex

if(this.p.multiselect) {
	$('#cb_'+$.jgrid.jqID(ts.p.id),this).bind('click',function(){
		//追加代码
		var rightfroz = ts.p.frozenColumns === true ? ts.p.id + "_rightfrozen" : "";
		if(froz) {......}
		//追加代码
		if(rightfroz) {
									$("#jqg_"+$.jgrid.jqID(ts.p.id)+"_"+$.jgrid.jqID(this.id), ts.grid.fbDiv )[ts.p.useProp ? 'prop': 'attr']("checked",true);
									$("#"+$.jgrid.jqID(this.id), ts.grid.fbDiv).addClass("ui-state-highlight");
								}
	})
	//2709行 //追加代码rightfroz
	if(froz || rightfroz) {
									$("#jqg_"+$.jgrid.jqID(ts.p.id)+"_"+$.jgrid.jqID(this.id), ts.grid.fbDiv )[ts.p.useProp ? 'prop': 'attr']("checked",false);
									$("#"+$.jgrid.jqID(this.id), ts.grid.fbDiv).removeClass("ui-state-highlight");
								}
	//2060行
	$(ts).before(grid.hDiv).click(function(e) {
	//2891行追加代码
		var frz = ts.p.frozenColumns ? ts.p.id+"_frozen" : "";
		var rightfrz = ts.p.frozenColumns ? ts.p.id+"_rightfrozen" : "";
		//2902行追加代码
		if(frz) {......}
		if(rightfrz) {
			$("#"+$.jgrid.jqID(n),"#"+$.jgrid.jqID(rightfrz)).removeClass("ui-state-highlight");
									$("#jqg_"+$.jgrid.jqID(ts.p.id)+"_"+$.jgrid.jqID(n), "#"+$.jgrid.jqID(rightfrz))[ts.p.useProp ? 'prop': 'attr']("checked", false);
								}
	})
}

3174行 方法setSelection

//3176行 代码修改为
var $t = this, stat,pt, ner, ia, tpsr, fid,rightfid;
//3201行 代码修改为
if($t.p.frozenColumns === true ) {
	fid = $t.p.id+"_frozen";
	rightfid = $t.p.id+"_rightfrozen";
}
//3216行追加
if(fid){......}
if(rightfid) {
	$("#"+$.jgrid.jqID($t.p.selrow), "#"+$.jgrid.jqID(rightfid)).removeClass("ui-state-highlight");
	$("#"+$.jgrid.jqID(selection), "#"+$.jgrid.jqID(rightfid)).addClass("ui-state-highlight");
}
//3256行追加
if(fid){......}
if(rightfid) {
	if(ia === -1) {
		$("#"+$.jgrid.jqID(selection), "#"+$.jgrid.jqID(rightfid)).addClass("ui-state-highlight");
	} else {
		$("#"+$.jgrid.jqID(selection), "#"+$.jgrid.jqID(rightfid)).removeClass("ui-state-highlight");
	}
	$("#jqg_"+$.jgrid.jqID($t.p.id)+"_"+$.jgrid.jqID(selection), "#"+$.jgrid.jqID(rightfid))[$t.p.useProp ? 'prop': 'attr']("checked",stat);
}

3280行 方法resetSelection

//3283代码修改为
if( t.p.frozenColumns === true ) {
	fid = t.p.id+"_frozen";
	rightfid = t.p.id+"_rightfrozen";
}
//3291行 追加代码
if (fid) {...... }
if (rightfid) { $("#"+$.jgrid.jqID(sr), "#"+$.jgrid.jqID(rightfid)).removeClass("ui-state-highlight"); }
// 3295 行追加代码
if(fid) { ...... }
if(rightfid) { $("#jqg_"+$.jgrid.jqID(t.p.id)+"_"+$.jgrid.jqID(sr), "#"+$.jgrid.jqID(rightfid))[t.p.useProp ? 'prop': 'attr']("checked",false); }
//3303行代码追加
if(fid) {......}
if(rightfid) { $("#"+$.jgrid.jqID(t.p.selrow), "#"+$.jgrid.jqID(rightfid)).removeClass("ui-state-highlight"); }
//3311行代码追加
if(fid) { ......}
if(rightfid) { 
	$("#"+$.jgrid.jqID(n), "#"+$.jgrid.jqID(rightfid)).removeClass("ui-state-highlight"); 
	$("#jqg_"+$.jgrid.jqID(t.p.id)+"_"+$.jgrid.jqID(n), "#"+$.jgrid.jqID(rightfid))[t.p.useProp ? 'prop': 'attr']("checked",false);
}

//3286行 方法setGridHeight

//添加代码
if ($($t.grid.bDiv).height() < $("table#"+$.jgrid.jqID($t.p.id)).height()) {
var u = navigator.userAgent;
if (u.indexOf('Trident') > -1) {
	$('.right-frozen-bdiv,.right-frozen-hdiv').css({'padding-right':'16px'})
}else if(u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1){
	$('.right-frozen-bdiv,.right-frozen-hdiv').css({'padding-right':'18px'})
}else{
	$('.right-frozen-bdiv,.right-frozen-hdiv').css({'padding-right':'10px'})
}

}
if($t.p.frozenColumns === true){
var u = navigator.userAgent;
if (u.indexOf('Trident') > -1) {
	$('#'+$.jgrid.jqID($t.p.id)+"_frozen").parent().height(bDiv.height() - 16);
	$('#'+$.jgrid.jqID($t.p.id)+"_rightfrozen").parent().height(bDiv.height() - 16);
}else if(u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1){
	$('#'+$.jgrid.jqID($t.p.id)+"_frozen").parent().height(bDiv.height() - 17);
	$('#'+$.jgrid.jqID($t.p.id)+"_rightfrozen").parent().height(bDiv.height() - 17);
}else{
	$('#'+$.jgrid.jqID($t.p.id)+"_frozen").parent().height(bDiv.height() - 10);
	$('#'+$.jgrid.jqID($t.p.id)+"_rightfrozen").parent().height(bDiv.height() - 10);
}
/*trident: u.indexOf('Trident') > -1, //IE内核
presto: u.indexOf('Presto') > -1, //opera内核
webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,*/
//follow the original set height to use 16, better scrollbar width detection

}

效果图