实现对表格数据的头几行或者头几列进行冻结,即滚动时保持这几行/列不动,通过网上查找代码,参考已有的代码的思路,实现了可以任意对行、列进行冻结。
一、实现原理:
创建多个div,div之间通过css实现层叠,每个div放置当前表格的克隆。
例如:需要行冻结时,创建存放冻结行表格的div,通过设置z-index属性和position属性,让冻结行表格在数据表格的上层。同理,需要列冻结时,创建存放冻结列表格的div,并放置在数据表格的上层。如果需要行列都冻结时,则除了创建冻结行、冻结列表格的div,还需要创建左上角的固定行列表格的div,并放置在所有div的最上层。
处理表格的滚动事件,在表格横向或者纵向滚动时,同时让相应的冻结行和冻结列也同步滚动。
处理html的resize事件,同步修改表格的滚动区域宽度和高度
二、核心代码
/*
* 锁定表头和列
*
* 参数定义
* table - 要锁定的表格元素或者表格ID
* freezeRowNum - 要锁定的前几行行数,如果行不锁定,则设置为0
* freezeColumnNum - 要锁定的前几列列数,如果列不锁定,则设置为0
* width - 表格的滚动区域宽度
* height - 表格的滚动区域高度
*/
function freezeTable(table, freezeRowNum, freezeColumnNum, width, height) {
//获取冻结行数或者列数
if (typeof(freezeRowNum) == 'string')
freezeRowNum = parseInt(freezeRowNum)
if (typeof(freezeColumnNum) == 'string')
freezeColumnNum = parseInt(freezeColumnNum)
//获取table
var tableId;
if (typeof(table) == 'string') {
tableId = table;
table = $('#' + tableId);
} else
tableId = table.attr('id');
/**
* 生成最外层的DIV用来承载内部的四个DIV
*/
var divTableLayout = $("#" + tableId + "_tableLayout");
if (divTableLayout.length != 0) {
divTableLayout.before(table);
divTableLayout.empty();
} else {
table.after("<div id='" + tableId + "_tableLayout' style='overflow:hidden;height:" + height + "px; width:" + width + "px;'></div>");
divTableLayout = $("#" + tableId + "_tableLayout");
}
/**
* 根据需要页面table定义的属性 需要冻结的行或者列 ,对应的拼接字符串用于生成不同的DIV 【如果行列同时冻结:生成总共四个DIV】【单独冻结行或列,仅需要生成两个DIV】
* 这个四个DIV都是包括数据在内,完全克隆了原本的table,
*/
var html = '';
if (freezeRowNum > 0 && freezeColumnNum > 0)
html += '<div id="' + tableId + '_tableFix" style="padding: 0px;"></div>';
if (freezeRowNum > 0)
html += '<div id="' + tableId + '_tableHead" style="padding: 0px;"></div>';
if (freezeColumnNum > 0)
html += '<div id="' + tableId + '_tableColumn" style="padding: 0px;"></div>';
html += '<div id="' + tableId + '_tableData" style="padding: 0px;"></div>';
//将div追加到页面
$(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"); //位于最底层的【数据DIV】【第一个DIV,也就是原本的那个真身】
divTableData.append(table);
//行列同时冻结生成的【行列DIV】【第二个DIV】,一般位于左上角重叠部分
if (divTableFix != null) {
var tableFixClone = table.clone(true); //克隆1
tableFixClone.attr("id", tableId + "_tableFixClone");
divTableFix.append(tableFixClone);
}
//行冻结生成的【冻结行DIV】【第三个DIV】
if (divTableHead != null) {
var tableHeadClone = table.clone(true);//克隆2
tableHeadClone.attr("id", tableId + "_tableHeadClone");
divTableHead.append(tableHeadClone);
}
//列冻结生成的【冻结列DIV】【第四个DIV】
if (divTableColumn != null) {
var tableColumnClone = table.clone(true);//克隆3
tableColumnClone.attr("id", tableId + "_tableColumnClone");
divTableColumn.append(tableColumnClone);
}
$("#" + tableId + "_tableLayout table").css("margin", "0");
/**
* 根据冻结行数,设置行冻结的div的高度【如果行列同时冻结,则行列div也设置对应高度】
*/
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);
}
/**
* 根据冻结列数,对冻结列DIV设置宽度【如果行列同时冻结,则行列div也设置对应宽度】
*/
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, "position": "absolute", "z-index": "45" });
divTableColumn != null && divTableColumn.css({ "overflow": "hidden", "height": height - 17, "position": "absolute", "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());
}
三、辅助代码
1、调整表的高度和宽度
/*
* 调整锁定表的宽度和高度,这个函数在resize事件中调用
*
* 参数定义
* table - 要锁定的表格元素或者表格ID
* width - 表格的滚动区域宽度
* height - 表格的滚动区域高度
*/
function adjustTableSize(table, width, 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);
}
2、返回当前页面高度
function pageHeight() {
if ($.browser.msie) {
return document.compatMode == "CSS1Compat" ? document.documentElement.clientHeight : document.body.clientHeight;
} else {
return self.innerHeight;
}
};
3、返回当前页面宽度
function pageWidth() {
if ($.browser.msie) {
return document.compatMode == "CSS1Compat" ? document.documentElement.clientWidth : document.body.clientWidth;
} else {
return self.innerWidth;
}
};
四、使用方法
在js中进行加载,在需要使用的方法后边调用此js函数:freezeTable(table, freezeRowNum, freezeColumnNum, width, height);
table
- 需要冻结的表格Table的Id属性;
freezeRowNum
- 要锁定几行的行数,不锁定为0;
freezeColumnNum
- 要锁定几列的列数,不锁定为0;
width
- 表格滚动区域宽度;
height
- 表格滚动区域高度;
例子:
$(function(){
//调用表格冻结事件
freezeTable("Tables","0","2","1920","1080");
})
$(window).resize(function() {
//在窗口变化时调整冻结表格的高度和宽度
adjustTableSize("Tables",pageWidth(), pageHeight());
});
这样,表格就固定了,可能你看不到你的页面被冻结,或者进去之后页面样式错乱,这个时候就需要使用检查元素,检查固定的div表格位置是否正确,背景是否透明,通过css样式调整即可。
主要是设置冻结列或者行的高度和宽度,将冻结的列或者行正好盖住需要冻结的列或者行上边,即可实现冻结前几列或者前几行,其余行和列滚动!