table表格实现行、列冻结

最新推荐文章于 2019-12-08 18:22:49 发布

iteye_1830

最新推荐文章于 2019-12-08 18:22:49 发布

阅读量2.2k

点赞数 1

分类专栏： javascript前台效果文章标签：表格行列冻结

本文链接：https://blog.youkuaiyun.com/iteye_1830/article/details/82509890

版权

本文介绍了一种实现表格行、列冻结的方法，通过创建多个div并利用CSS层叠来保持指定行或列在滚动时固定。在表格滚动和窗口resize事件中调整相应冻结部分的位置和大小。在IE7下遇到页面尺寸变化时滚动区域尺寸不变的问题，现已修复。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

实现原理：

创建多个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)

	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("<div id='" + tableId + "_tableLayout' style='overflow:hidden;height:" + height + "px; width:" + width + "px;'></div>");
		
		divTableLayout = $("#" + tableId + "_tab