自定义函数实现jqGrid数据网格右冻结

再见残月

已于 2023-05-10 10:41:40 修改

阅读量382

点赞数

分类专栏： Web 文章标签： javascript 开发语言 jqGrid 右冻结

于 2023-05-10 10:34:52 首次发布

本文链接：https://blog.csdn.net/qq_31368673/article/details/130595098

版权

Web 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

框架jqGrid只能实现左冻结列，现模仿该方法进行改造，实现右冻结列的功能。

在源代码中只增加一个方法，对框架原功能无影响。

具体用法和关键改造点见代码

注：只需要在源代码中指定位置增加setFrozenColumns_right这个方法，源代码中其它方法均不要改动

/**
*
* @license Guriddo jqGrid JS - v5.0.2 - 2016-01-18
* Copyright(c) 2008, Tony Tomov, tony@trirand.com
* 再见残月
* License: http://guriddo.net/?page_id=103334
*/
(function( factory ) {
 "use strict";
 if ( typeof define === "function" && define.amd ) {
  // AMD. Register as an anonymous module.
  define([ 
   "jquery"
  ], factory );
  } else {
  // Browser globals
  factory( jQuery );
  }
}(function( $ ) {
 // jqGrid高度，根据分辨率的改变而手动调整
 var jqGridHeight = 500;
 //分页查询全部最大展示条数
 var maxPagesize = 1000000;
$.jgrid.extend({
	setFrozenColumns : function () {
		return this.each(function() {
			// setFrozenColumns函数实现，再见残月
		});
	},
	 /**
	  * 4948行函数setFrozenColumns后面
	  * 框架自定义函数，用于数据网格中将指定的列冻结在网格右侧。
	  * 用法：
	  * 1、将需要冻结的列放在网格最后边
	  * 2、给列添加frozen: true属性
	  * 3、调用jqGrid方法setFrozenColumns_right：$("#jqGrid").jqGrid('setFrozenColumns_right');
	  * 注：
	  * 1、冻结列与多表头会产生冲突，可能出现错位问题，不建议二者同时使用
	  * 2、冻结列必须放在最后面，如果两个冻结列之间有一个非冻结列(无frozen: true属性)，则非冻结列之前的冻结列会失效
	  * 3、冻结列是通过将指定列复制悬浮实现的，为页面样式的美观性，如果列表较窄无横向滚动条时，冻结列将不生效
	  * author：再见残月
	  * @returns {*}
	  */
	setFrozenColumns_right : function () {
		return this.each(function() {
			if ( !this.grid ) {return;}
			// 数据网格数据宽度小于列表所占空间的宽度时(既网格不会出现横向滚动条)，右冻结列不生效，再见残月
			if (this.p.tblwidth < this.p.width) {return;}
			// TODO 重要修改点，再见残月
			var $t = this, cm = $t.p.colModel,i=cm.length - 1, len = cm.length, minfrozen = cm.length, frozen= false,
			hd= $($t).jqGrid('getStyleUI',$t.p.styleUI+".base",'headerDiv', true, 'ui-jqgrid-hdiv'),
			hover = $($t).jqGrid('getStyleUI',$t.p.styleUI+".common",'hover', true);
			// 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;
			}
		   // TODO 重要修改点，再见残月
		   // if($t.p.rownumbers) { i++; }
		   // if($t.p.multiselect) { i++; }
		   // 从右侧遍历，找到连续带冻结列属性的列的顺序编码
		   while(i >= 0) {
				// from right, no breaking frozen
				if(cm[i].frozen === true) {
					frozen = true;
					minfrozen = i;
				} else {
					break;
				}
				i--;
			}
			// 有配置冻结列
			if( minfrozen < len && 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();
					}
				}
				// 冻结列头部 TODO 重要修改点，再见残月
				$t.grid.fhDiv = $('<div style="position:absolute;' + ($t.p.direction === "rtl" ? 'left:0;' : 'right:0;') + 'top:'+top+'px;height:'+hth+'px;" class="frozen-div ' + hd +'"></div>');
				// 冻结列数据 TODO 重要修改点，再见残月
				$t.grid.fbDiv = $('<div style="position:absolute;' + ($t.p.direction === "rtl" ? 'left:0;' : 'right:0;') + 'top:'+(parseInt(top,10)+parseInt(hth,10) + 1)+'px;overflow-y:hidden" class="frozen-bdiv ui-jqgrid-bdiv"></div>');
				$("#gview_"+$.jgrid.jqID($t.p.id)).append($t.grid.fhDiv);
				var htbl = $(".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", htbl).each(function(){
						$("th:gt("+minfrozen+")",this).remove();
					});
					 var swapfroz = -1, fdel = -1, cs, rs;
					 $("tr.jqg-second-row-header th", htbl).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 === minfrozen) {
							fdel = minfrozen;
							return false;
						}
					});
					if(swapfroz !== minfrozen) {
						fdel = minfrozen;
					}
					$("tr.jqg-second-row-header", htbl).each(function(){
						$("th:gt("+fdel+")",this).remove();
					});
				} else {
					$("tr",htbl).each(function(){
						// TODO 重要修改点  删除标记的冻结列之前所有的数据
						$("th:lt("+minfrozen+")",this).remove();
						// 设置冻结列表头的左边框样式
						$(this).parents('table').css('border-left','1px solid rgb(60, 118, 194)');
					});
				}
				$(htbl).width(1);
				// resizing stuff
				$($t.grid.fhDiv).append(htbl).mousemove(function (e) {
					if($t.grid.resizing){ $t.grid.dragMove(e);return false; }
				});
				if($t.p.footerrow) {
					var hbd = $(".ui-jqgrid-bdiv","#gview_"+$.jgrid.jqID($t.p.id)).height();
					$t.grid.fsDiv = $('<div style="position:absolute;left:0px;top:'+(parseInt(top,10)+parseInt(hth,10) + parseInt(hbd,10)+1)+'px;" class="frozen-sdiv ui-jqgrid-sdiv"></div>');
					$("#gview_"+$.jgrid.jqID($t.p.id)).append($t.grid.fsDiv);
					var ftbl = $(".ui-jqgrid-ftable","#gview_"+$.jgrid.jqID($t.p.id)).clone(true);
					$("tr",ftbl).each(function(){
						$("td:gt("+minfrozen+")",this).remove();
					});
					$(ftbl).width(1);
					$($t.grid.fsDiv).append(ftbl);
				}
				$($t).bind('jqGridResizeStop.tailong_setFrozenColumns_right', function (e, w, index) {
					var rhth = $(".ui-jqgrid-htable",$t.grid.fhDiv);
					$("th:eq("+index+")",rhth).width( w );
					var btd = $(".ui-jqgrid-btable",$t.grid.fbDiv);
					$("tr:first td:eq("+index+")",btd).width( w );
					if($t.p.footerrow) {
						var ftd = $(".ui-jqgrid-ftable",$t.grid.fsDiv);
						$("tr:first td:eq("+index+")",ftd).width( w );
					}
				});
				// 列表数据填充
				// data stuff
				//TODO support for setRowData
				$("#gview_"+$.jgrid.jqID($t.p.id)).append($t.grid.fbDiv);
				$($t.grid.fbDiv).bind('mousewheel DOMMouseScroll', function (e) {
					var st = $($t.grid.bDiv).scrollTop();
					if (e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) {
						//up
						$($t.grid.bDiv).scrollTop( st - 25 );
					} else {
						//down
						$($t.grid.bDiv).scrollTop( st + 25 );
					}
					e.preventDefault();
				});
				if($t.p.hoverrows === true) {
					$("#"+$.jgrid.jqID($t.p.id)).unbind('mouseover').unbind('mouseout');
				}
				$($t).bind('jqGridAfterGridComplete.tailong_setFrozenColumns_right', function () {
					$("#"+$.jgrid.jqID($t.p.id)+"_frozen").remove();
					$($t.grid.fbDiv).height($($t.grid.bDiv).height()-16);
					var btbl = $("#"+$.jgrid.jqID($t.p.id)).clone(true);
					$("tr[role=row]",btbl).each(function(){
						// TODO 重要修改点	
						$("td[role=gridcell]:lt("+minfrozen+")",this).remove();
						// 设置冻结列数据列的左边框样式
						$(this).parents('table').css('border-left','1px solid rgb(221, 221, 221)');
					 });
					 $(btbl).width(1).attr("id",$t.p.id+"_frozen");
					 $($t.grid.fbDiv).append(btbl);
					 // 设置鼠标悬浮效果
					 if($t.p.hoverrows === true) {
						$("tr.jqgrow", btbl).hover(
							function(){ $(this).addClass( hover ); $("#"+$.jgrid.jqID(this.id), "#"+$.jgrid.jqID($t.p.id)).addClass( hover ); },
							function(){ $(this).removeClass( hover ); $("#"+$.jgrid.jqID(this.id), "#"+$.jgrid.jqID($t.p.id)).removeClass( hover ); }
						);
						$("tr.jqgrow", "#"+$.jgrid.jqID($t.p.id)).hover(
							function(){ $(this).addClass( hover ); $("#"+$.jgrid.jqID(this.id), "#"+$.jgrid.jqID($t.p.id)+"_frozen").addClass( hover );},
							function(){ $(this).removeClass( hover ); $("#"+$.jgrid.jqID(this.id), "#"+$.jgrid.jqID($t.p.id)+"_frozen").removeClass( hover ); }
						);
					 }
					 btbl=null;
				});
				if(!$t.grid.hDiv.loading) {
					$($t).triggerHandler("jqGridAfterGridComplete");
				}
				$t.p.frozenColumns = true;
			}
		});
	},
	destroyFrozenColumns :  function() {
		return this.each(function() {
			// destroyFrozenColumns函数实现
		});
	},
});
})
);

项目保密原因，无法截图，有兄弟成功用上了，请帮我补张图。。。