jQuery实现冻结表格行和列

前端之家收集整理的这篇文章主要介绍了jQuery实现冻结表格行和列前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

客户要求实现对表格数据的头几行或者头几列进行冻结,即滚动时保持这几行/列不动,通过网上查找代码,参考已有的代码的思路,实现了可以任意对行、列进行冻结。

实现原理:

创建多个div,div之间通过css实现层叠,每个div放置当前表格的克隆。例如:需要行冻结时,创建存放冻结行表格的div,通过设置z-index属性和position属性,让冻结行表格在数据表格的上层。同理,需要列冻结时,创建存放冻结列表格的div,并放置在数据表格的上层。如果需要行列都冻结时,则除了创建冻结行、冻结列表格的div,还需要创建左上角的固定行列表格的div,并放置在所有div的最上层。 处理表格的滚动事件,在表格横向或者纵向滚动时,同时让相应的冻结行和冻结列也同步滚动。 处理html的resize事件,同步修改表格的滚动区域宽度和高度

代码如下:

if (typeof(freezeColumnNum) == 'string')
freezeColumnNum = parseInt(freezeColumnNum)

var tableId;
if (typeof(table) == 'string') {
tableId = table;
table = $('#' + tableId);
} else
tableId = table.attr('id');

var divTableLayout = $("#" + tableId + "_tableLayout");

if (divTableLayout.length != 0) {
divTableLayout.before(table);
divTableLayout.empty();
} else {
table.after("

");

divTableLayout = $("#" + tableId + "_tableLayout");

}

var html = '';
if (freezeRowNum > 0 && freezeColumnNum > 0)
html += '<div id="' + tableId + '_tableFix" style="padding: 0px;">

';

if (freezeRowNum > 0)
html += '<div id="' + tableId + '_tableHead" style="padding: 0px;">

';

if (freezeColumnNum > 0)
html += '<div id="' + tableId + '_tableColumn" style="padding: 0px;">

';

html += '<div id="' + tableId + '_tableData" style="padding: 0px;">

';

$(html).appendTo("#" + tableId + "_tableLayout");

var divTableFix = freezeRowNum > 0 && freezeColumnNum > 0 ? $("#" + tableId + "_tableFix") : null;
var divTableHead = freezeRowNum > 0 ? $("#" + tableId + "_tableHead") : null;
var divTableColumn = freezeColumnNum > 0 ? $("#" + tableId + "_tableColumn") : null;
var divTableData = $("#" + tableId + "_tableData");

divTableData.append(table);

if (divTableFix != null) {
var tableFixClone = table.clone(true);
tableFixClone.attr("id",tableId + "_tableFixClone");
divTableFix.append(tableFixClone);
}

if (divTableHead != null) {
var tableHeadClone = table.clone(true);
tableHeadClone.attr("id",tableId + "_tableHeadClone");
divTableHead.append(tableHeadClone);
}

if (divTableColumn != null) {
var tableColumnClone = table.clone(true);
tableColumnClone.attr("id",tableId + "_tableColumnClone");
divTableColumn.append(tableColumnClone);
}

$("#" + tableId + "_tableLayout table").css("margin","0");

if (freezeRowNum > 0) {
var HeadHeight = 0;
var ignoreRowNum = 0;
$("#" + tableId + "_tableHead tr:lt(" + freezeRowNum + ")").each(function () {
if (ignoreRowNum > 0)
ignoreRowNum--;
else {
var td = $(this).find('td:first,th:first');
HeadHeight += td.outerHeight(true);

    ignoreRowNum = td.attr('rowSpan');
    if (typeof(ignoreRowNum) == 'undefined')
      ignoreRowNum = 0;
    else
      ignoreRowNum = parseInt(ignoreRowNum) - 1;
  }
});
HeadHeight += 2;

divTableHead.css("height",HeadHeight);
divTableFix != null && divTableFix.css("height",HeadHeight);

}

if (freezeColumnNum > 0) {
var ColumnsWidth = 0;
var ColumnsNumber = 0;
$("#" + tableId + "_tableColumn tr:eq(" + freezeRowNum + ")").find("td:lt(" + freezeColumnNum + "),th:lt(" + freezeColumnNum + ")").each(function () {
if (ColumnsNumber >= freezeColumnNum)
return;

  ColumnsWidth += $(this).outerWidth(true);

  ColumnsNumber += $(this).attr('colSpan') ? parseInt($(this).attr('colSpan')) : 1;
});
ColumnsWidth += 2;

divTableColumn.css("width",ColumnsWidth);
divTableFix != null && divTableFix.css("width",ColumnsWidth);

}

divTableData.scroll(function () {
divTableHead != null && divTableHead.scrollLeft(divTableData.scrollLeft());

divTableColumn != null && divTableColumn.scrollTop(divTableData.scrollTop());

});

divTableFix != null && divTableFix.css({ "overflow": "hidden","position": "absolute","z-index": "50" });
divTableHead != null && divTableHead.css({ "overflow": "hidden","width": width - 17,"z-index": "45" });
divTableColumn != null && divTableColumn.css({ "overflow": "hidden","height": height - 17,"z-index": "40" });
divTableData.css({ "overflow": "scroll","width": width,"height": height,"position": "absolute" });

divTableFix != null && divTableFix.offset(divTableLayout.offset());
divTableHead != null && divTableHead.offset(divTableLayout.offset());
divTableColumn != null && divTableColumn.offset(divTableLayout.offset());
divTableData.offset(divTableLayout.offset());
}

/*

  • 调整锁定表的宽度和高度,这个函数在resize事件中调用
  • 参数定义
  • table - 要锁定的表格元素或者表格ID
  • width - 表格的滚动区域宽度
  • height - 表格的滚动区域高度
    */
    function adjustTableSize(table,height) {
    var tableId;
    if (typeof(table) == 'string')
    tableId = table;
    else
    tableId = table.attr('id');

$("#" + tableId + "_tableLayout").width(width).height(height);
$("#" + tableId + "_tableHead").width(width - 17);
$("#" + tableId + "_tableColumn").height(height - 17);
$("#" + tableId + "_tableData").width(width).height(height);
}

function pageHeight() {
if ($.browser.msie) {
return document.compatMode == "CSS1Compat" ? document.documentElement.clientHeight : document.body.clientHeight;
} else {
return self.innerHeight;
}
};

//返回当前页面宽度
function pageWidth() {
if ($.browser.msie) {
return document.compatMode == "CSS1Compat" ? document.documentElement.clientWidth : document.body.clientWidth;
} else {
return self.innerWidth;
}
};

$(document).ready(function() {
var table = $("table");
var tableId = table.attr('id');
var freezeRowNum = table.attr('freezeRowNum');
var freezeColumnNum = table.attr('freezeColumnNum');

if (typeof(freezeRowNum) != 'undefined' || typeof(freezeColumnNum) != 'undefined') {
freezeTable(table,freezeRowNum || 0,freezeColumnNum || 0,pageWidth(),pageHeight());

var flag = false;
$(window).resize(function() {
  if (flag) 
    return ;

  setTimeout(function() { 
    adjustTableSize(tableId,pageHeight()); 
    flag = false; 
  },100);

  flag = true;
});

}
});

使用时,只要在table元素设置freezeRowNum和freezeColumnNum属性值,即可实现冻结效果

代码如下:

以上所述就是本文的全部内容了,希望大家能够喜欢。

猜你在找的jQuery相关文章