表格冻结
表格冻结的基本思路
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());
});