前端#表格冻结

表格冻结

表格冻结的基本思路

1.将表格头元素复制到新的元素内（复制到一个新的div内）

2.新元素使用绝对定位，将新元素位置与表格头元素位置对齐

示例

	function doFreezeDataTableHeader(tableId) {
		//1.创建包装器
		var tmpWrap = $('<div></div>').css({
			'position':'relative'
		});
		var tmpTableWrap = $('#'+tableId).parent();
		tmpTableWrap.wrap(tmpWrap);
		//2.创建虚拟表头
		var visualHeaderDiv = $('<div></div>').css({
			'clear':'both',
			'overflow':'hidden',
			'position':'absolute',
			'width':$(tmpTableWrap).outerWidth(true)
		});
		//3.复制header
		var dupTableObj = $('#' + tableId).clone(true);
		//清空ID
		var tableIdHeader = tableId + '_header';
		dupTableObj.attr('id',tableIdHeader);
		dupTableObj.find('tbody').remove();
		dupTableObj.appendTo(visualHeaderDiv);
		//4.修复表头
		$('#'+tableId).find('thead tr:eq(0)>th').each(function(index,elem){
			dupTableObj.find('thead th:eq(' + index + ')').width($(elem).width()).css('min-width',$(elem).width());
		});
		//呈现
		visualHeaderDiv.insertBefore(tmpTableWrap);
		$('#'+tableId).parent().scroll(function(eveData){
			console.log($(this).scrollLeft() + ":" + $(this).scrollTop());
			visualHeaderDiv.scrollTop($(this).scrollTop()).scrollLeft($(this).scrollLeft());
		});