`
aystnd
  • 浏览: 22941 次
  • 性别: Icon_minigender_1
  • 来自: 山东淄博
社区版块
存档分类
最新评论

table表格实现行、列冻结

阅读更多

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

实现原理:

创建多个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 + "_tableLayout");
	}
	
	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>';
	
	
	$(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, "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());
}

/*
 * 调整锁定表的宽度和高度,这个函数在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);
}

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, pageWidth(), pageHeight()); 
				flag = false; 
			}, 100);
			
			flag = true;
		});
	}
});

 

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

<table id="reportTable" width="1900" freezeRowNum="2" freezeColumnNum="2" class="report" align="center">
...
</table>

 

 
调试时发现在ie7下改变页面尺寸时,不能改变滚动区域的尺寸,一直不好解决,请大家帮着看看代码如何修改

注:上面问题已解决,代码已修改

  • 大小: 59.7 KB
分享到:
评论
2 楼 zh_123 2014-12-25  
试过ie9吗,表格总是出现错位的问题?该怎么解决?
1 楼 wangchaoyong 2013-07-16  
你好!可以问你个问题吗?如果是冻结了列,但列又是一棵树状结构,这种要怎么办呢?

相关推荐

    table的行列冻结、行冻结、列冻结

    本主题主要围绕"table的行列冻结、行冻结、列冻结"展开,讲解如何使用jQuery实现这一功能,并确保其在主流浏览器上的兼容性。 首先,"行列冻结"是指在表格中固定特定的行和列,即使在用户滚动页面时,这些行和列也...

    HTML 实现行、列冻结功能

    本篇文章将详细介绍如何利用这两种技术在HTML表格中实现行和列的冻结。 首先,理解HTML表格的基础结构至关重要。HTML `&lt;table&gt;` 标签用于创建表格,而`&lt;tr&gt;` 表示行,`&lt;th&gt;` 用于定义表头,`&lt;td&gt;` 用于定义数据...

    table的行列冻结

    `freez-table-demo.htm`可能是一个包含冻结表格功能的HTML示例文件,它可能展示了如何结合HTML、CSS和JavaScript实现表格冻结。而`scripts`可能是包含实现该功能的JavaScript代码的文件夹,可能包含了自定义的脚本或...

    bootstrap-table-冻结列样例

    总的来说,"bootstrap-table-冻结列样例"是一个教你如何在Bootstrap Table中实现列冻结的示例,这对于那些希望在网页中创建具有固定列的交互式表格的开发者来说非常有用。通过学习和理解这个样例,你可以提升你的...

    table 冻结列原型

    "表格冻结列原型"是一种在网页设计中常见的功能,它允许用户在滚动浏览长表格时保持某些列固定不动,以便始终可见关键信息。这个原型可能是为开发者或设计师提供了一个直观的示例,以理解如何在实际项目中实现这一...

    bootstraptable冻结列例子.doc

    总结来说,Bootstrap Table 的冻结列功能通过结合 `fixedColumns`、`fixedNumber` 和 `fixedRightNumber` 参数,使得在网页上处理大量数据时能更方便地查看和操作表格。通过合理配置这些参数,你可以根据需求定制出...

    H5 表格冻结首行,首列和最后一行

    页面显示表格,表格的首行冻结,首列冻结,最后一行也冻结,实现数据查看和合计查看的效果。DemoDemoDemoDemo

    jQuery插件冻结行列、固定列固定行,html、table实现

    该插件名为"jQuery-Plugin-To-Freeze-Table-Columns-Rows-On-Scroll",其主要功能是在表格滚动时保持顶部行和左侧列固定,以便用户在浏览长表格时仍能清晰地看到表头和关键列。以下我们将深入探讨这个插件的工作原理...

    冻结table的行和列

    当用户滚动表格时,通过JavaScript监听滚动事件并调整可见区域,可以实现行和列的冻结效果。在桌面应用如Excel中,这个功能是内置的,用户可以通过简单的操作来启用。 描述中提到的链接指向了一篇博客文章,虽然...

    bootstrap-table-fixed-columns冻结列,并完善排序、列宽和合并行

    在原版的 `bootstrap-table-fixed-columns` 插件中,可能会遇到一些问题,如冻结列后排序功能失效、列宽显示不正确以及无法正常合并行。这些问题对于表格的正常使用和美观性都是不利的。描述中的内容表明,我们已经...

    BootStrap-table 表格固定列,固定左侧列以及右侧列,可以固定特定的列

    BootStrap-table 表格固定列,固定左侧列以及右侧列,可以固定特定的列,fixedColumns: true, fixedNumber: 2,fixedRightNumber:1,值可以自定义,一定要使用配套(压缩包就是配套的相关文件)的内容,否则会出现一些...

    Asp.net 表格列冻结

    实现`Asp.net 表格列冻结`通常涉及到前端和后端的协同工作。在本例中,描述中提到了采用了jQuery插件来实现这一功能。jQuery是一个强大的JavaScript库,它简化了DOM操作、事件处理、动画以及Ajax交互等任务,非常...

    asp.net webform冻结列 冻结表头 复杂表头

    冻结列是指在表格中固定某些列的位置,使其不会随着水平滚动条的移动而消失;而冻结表头则是指在垂直滚动时保持表头始终在视口顶部,便于用户在浏览长列表时跟踪列对应的数据。 在ASP.NET WebForm中,我们可以利用...

    table固定行和列

    在Web开发中,表格(Table)是展示数据的常用元素,但如何实现表格的固定行和列是一项常见的需求。这通常涉及到CSS样式控制,以便在滚动时保持特定行或列始终可见,提升用户浏览大量数据时的体验。下面将详细探讨...

    GRIDVIEW实现EXCEL列冻结功能

    4. **应用样式**:当滚动条达到一定的位置后(即超过了需要冻结的列的初始位置),给冻结列添加特定的样式,使其相对于容器固定。 #### 具体实现 根据题目提供的代码片段,我们可以进一步解析实现步骤: 1. **...

    jQuery对表格的列冻结

    实现列冻结的基本思路是创建一个新的表格,该表格只包含需要冻结的列,然后将其定位在原表格左侧,使其始终在可视区域内。以下是一些关键步骤: 1. **HTML结构**:确保你的表格(`&lt;table&gt;`)有正确的结构,每个...

    table冻结表头

    这个插件专门用于实现表格的头部和/或列的冻结,使得在浏览长表格时,表头始终可见,增强了用户体验。 "table冻结表头"是一款基于jQuery的轻量级插件,它允许开发者快速集成到项目中,通过简单的API调用,即可实现...

    jquery 列表行冻结、列冻结

    jQuery库提供了强大的DOM操作功能,这使得我们可以轻松地实现表格的行和列冻结。下面是一些关键步骤: 1. **获取表格元素**:首先,通过jQuery选择器选取要冻结行或列的表格元素,例如`$("#myTable")`。 2. **复制...

    基于bootstrap-table 实现 右侧列固定

    基于bootstrap-table 实现 右侧列固定,也可以针对左侧列固定,针对操作列使用起来非常方便,引用jquery、bootstrap-table-fixed 样式和js文件后,可以随意设置,灵活。 fixedColumns: true,//fixedtNumber:2, //...

    冻结(固定) 行或列 完整例子

    与冻结行类似,冻结列是将某一列固定在屏幕左侧,比如将第一列的分类信息固定,这样用户在水平滚动时仍能看到分类信息,方便查找和对比。 在jsp中,我们可以使用JavaScript库,如jQuery,配合CSS来实现这个效果。...

Global site tag (gtag.js) - Google Analytics