jqGrid实现冻结行和冻结列

 jqGrid实现冻结行和冻结列

jqGrid里可以直接实现列的冻结，通过下面的方法实现列冻结：

$("#list2").jqGrid('setFrozenColumns');

但是有很多因素会影响到列冻结，造成冻结失效，主要因素有如下几点：

1）、启用了树形表格时（ TreeGrid ）

2）、启用了子表格（SubGrid）

3）、启用了单元格编辑（cellEdit）

4）、使用行编辑，冻结的列不能为编辑

5）、设置了可排序的列，jqGrid的sortable设置为true或者方法

6）、scroll配置为true或者1

7）、启用了数据分组

8）、启用页脚数据行（footerrowcab参数）

如果没注意设置错了上面的东西就导致冻结列的失效，要注意！

但是问题是jqGrid可以实现冻结列，但是要想单独冻结行或同时冻结行和列该怎么办呐？？？

看了一下jqGrid的框架代码发现冻结列的原理就是：

1、克隆需要冻结列

2、然后把克隆的列覆盖到原来的列上面

3、设置一下表格的事件

基本上通过以上三部就可以实现冻结了。

上面通过jqGrid自带的方法实现了列的冻结，下面用具体的代码来说明如何实现冻结行的：

var setFrozenRow = function(sel,rowCount){
	if($('#gview_list2 .frozen-rdiv')){
		$('#gview_list2 .frozen-rdiv').remove();
	}
	var hth = $(".ui-jqgrid-htable").height();//获取列标题的高度用来设置top值
	
	var htw = $("#gview_list2").width();//获取内容的宽度
	var htlist = $(".ui-jqgrid-htable th");//获取标题
	var frowms = [];//存储冻结行
	var fbDiv = $('<div style="position:absolute;left:0px;top:'+(parseInt(hth,10) + 1)+'px;height:'+ (parseInt(hth,10)*rowCount + (1+rowCount))+'px;overflow-x:hidden;" class="frozen-rdiv ui-jqgrid-rdiv"></div>');
	$("#gview_list2").append(fbDiv);
	$('.frozen-rdiv').css('width',htw-18);
	for(var i = 0 ; i < rowCount ; ++i){//循环克隆需要冻结的行
		var temp = $('.jqgrow:nth-child('+ (i+2) +')',sel).clone(true);
		frowms.push(temp);
	}
	var out = $(sel).clone(true);//获取<table><tbody></tbody></table>标签
	out.children('tbody').empty();
	htlist.each(function(index){//循环设置克隆行的每一列的宽度
		frowms[0].children('td').eq(index).attr('width',$(this).width());
	});
	
	for(var j = 0 ,len = frowms.length; j < len ; j++){//循环将克隆的行插入到<tbody></tbody>标签中去
		frowms[j].appendTo(out);
	}
	out.appendTo(fbDiv);
	
	/*
	 * 设置冻结中所需要的事件
	 * */
	$('.frozen-rdiv').on('click','tr',function(){//点击冻结的行添加高亮的效果
		var index = $(this).index();
		$(this).addClass('ui-state-highlight').siblings().removeClass('ui-state-highlight');
		$('.frozen-rcdiv tr').eq(index).addClass('ui-state-highlight').siblings().removeClass('ui-state-highlight');
	});
	$(sel).on('click',function(){//当点击为冻结列时清楚冻结列的高亮效果
		$('.frozen-rdiv tbody').children('tr').each(function(){
			$(this).removeClass('ui-state-highlight');
		});
	});

	var bdiv = $("#gview_list2 .ui-jqgrid-bdiv").get(0);
	bdiv.onscroll = function(){//设置冻结行的左右滚动
		var curX = this.scrollLeft;
		$('.frozen-rdiv').scrollLeft(curX);
	};
	
	$('.frozen-rdiv tr').hover(//给冻结行设置鼠标移上的效果
		function(){
			var index = $(this).index();
			$('.frozen-rcdiv tr').eq(index).addClass('ui-state-hover');
			
		},
		function(){
			var index = $(this).index();
			$('.frozen-rcdiv tr').eq(index).removeClass('ui-state-hover');
		}
	);
	
};

下面贴一下同时冻结行和列的代码，若要同时冻结行和列，要分别执行冻结行和列的代码

var setFrozenRowAndCol = function(sel){
	let rowCount = $('.frozen-rdiv tr').length;
	let colCount = 0;
	let colArray = $('#list2').jqGrid('getGridParam','colModel');
	for(var i = 0,len = colArray.length ; i < len ; ++i){//判断需要冻结列的列数
		if(colArray[i].frozen === true){
			colCount += 1;
		}
	}
	if(rowCount == 0 || colCount == 0){//只有冻结行和冻结列同时存在的时候才启动
		return;
	}
	if($('#gview_list2 .frozen-rcdiv')){
		$('#gview_list2 .frozen-rcdiv').remove();
	}
	var hth = $(".ui-jqgrid-htable").height();
	var htWidth = [];
	for(var i = 0 ; i < colCount ; ++i){
		htWidth.push($(".ui-jqgrid-htable th:nth-child(" + (i+1) + ")").width());
	}
	
	var rcDiv = $('<div style="position:absolute;left:0px;top:'+(parseInt(hth,10) + 1)+'px;height:'+ (parseInt(hth,10)*rowCount + (1+rowCount))+'px;" class="frozen-rcdiv ui-jqgrid-rcdiv"></div>');
	$("#gview_list2").append(rcDiv);
	
	var out = $(sel).clone(true);
	out.children('tbody').empty();
	var outTr = [];
	for(var j = 0 ; j < rowCount ; ++j){
		var tempRow = $('tbody tr:nth-child('+ (j+2) +')',sel).clone(true);
		tempRow.empty();
		for(var k = 0 ; k < colCount ; ++k){
			var tempCol = $('.jqgrow:nth-child('+ (j+2) +') td:nth-child('+ (k + 1) +')',sel).clone(true);
			tempCol.width(htWidth[k]);
			tempCol.appendTo(tempRow);
		}
		outTr.push(tempRow);
	}
	for(var l = 0, llen = outTr.length; l < llen ; ++l){
		outTr[l].appendTo(out);
	}
	out.appendTo(rcDiv);
	rcDiv.children('table').css('width','auto');
	
	$('.frozen-rcdiv').on('click','tr',function(){
		var index = $(this).index();
		$(this).addClass('ui-state-highlight').siblings().removeClass('ui-state-highlight');
		$('.frozen-rdiv tr').eq(index).addClass('ui-state-highlight');
	});
	$(sel).on('click',function(){
		$('.frozen-rcdiv tbody').children('tr').each(function(){
			$(this).removeClass('ui-state-highlight');
		});
	});
	$('.frozen-rdiv').on('click','tr',function(){
		var index = $(this).index();
		$('.frozen-rcdiv tr').eq(index).addClass('ui-state-highlight').siblings().removeClass('ui-state-highlight');
	
	});
	$('.frozen-rcdiv tr').hover(
		function(){
			var index = $(this).index();
			$('.frozen-rdiv tr').eq(index).addClass('ui-state-hover');
		},
		function(){
			var index = $(this).index();
			$('.frozen-rdiv tr').eq(index).removeClass('ui-state-hover');
		}
	);
};

总结一下，冻结行和列是同过拼接标签然后插入到表格中，覆盖原来的单元格。