jqGridは凍結行と凍結列を実現します.

5478 ワード

JavaScript

jqGridは凍結行と凍結列を実現します.
jqGridで直接列の凍結ができます.次の方法で列の凍結ができます.
$
「〹list 2」
)jqGrid(
'set FrozenColumns'
)0
しかし、多くの要因が列の凍結に影響し、凍結が無効になります.主な要因は以下の通りです.
1)ツリーテーブルを有効にした場合(TreeGrid)
2)サブテーブルを有効にしました(SubGrid)
3)、セル編集が有効になりました.
4)行編集、凍結した列は編集できません.
5)並べ替え可能な列を設置し、jqGridのsortableはtrueまたは方法に設定する.
6)、scrollはtrueまたは1に設定されています.
7)データグループを有効にしました.
8)フッターデータ行を有効にする(footerrowcabパラメータ)
上のものを誤って設定したら、凍結列が無効になりますので、注意してください.
しかし問題はjqGridが凍結列を実現することができますが、単独で凍結行または同時に行と列を凍結するにはどうすればいいですか?
jqGridのフレームコードを見たら、凍結列の原理が分かりました.
1、クローンは列を凍結する必要があります.
2、クローンの列を元の列に上書きします.
3、テーブルのイベントを設定します.
基本的に上の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 = $('

');
	$("#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);//    
	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++){//              
		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 = $('

');
	$("#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');
		}
	);
};

まとめて、行と列を凍結します.同じラベルを貼り合わせて表に挿入し、元のセルを上書きします.

React同体開発(一)