锁定表头和固定列(Fixed table head and columns)

最新推荐文章于 2024-08-15 09:08:34 发布
最新推荐文章于 2024-08-15 09:08:34 发布
阅读量4.2k 收藏
点赞数
分类专栏： jquery 文章标签： table function div scroll 框架 opera
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zyp_tfy/article/details/6672616
版权
 

前段时间需要这个功能，但是找了很多都不能完美的实现，不是只能锁定表头，就是浏览器兼容问题什么的，在此就自己做了一个锁定表头和列的js方法，依赖于JQuery。

因为方法很简单，就未封装成插件的形式，仅仅以代码方式发布。这里把自己做的方式写出来.

支持IE6+，FF3.6+，Opera9+，Chrome9+

一、实现方式

二、整体的框架

1、最下面的是原始的Table。

2、用左边的table覆盖在上层，命名为tableColumn。

3、用上部的table覆盖在更上层，命名为tableHead。

4、在左上角覆盖固定不动的table，命名为tableFix。

自然在各自的外层都要用div框起来，以便后面的浮动和覆盖等等，所以结构的html如下：

<div id="MyTable_tableLayout">
	<div id="MyTable_tableFix">
		<table id="MyTable_tableFixClone" border="1" cellspacing="0" cellpadding="0"></table>
	</div>
	<div id="MyTable_tableHead">
		<table id="MyTable_tableHeadClone" border="1" cellspacing="0" cellpadding="0"></table>
	</div>
	<div id="MyTable_tableColumn">
		<table id="MyTable_tableColumnClone" border="1" cellspacing="0" cellpadding="0"></table>
	</div>
	<div id="MyTable_tableData">
		<table id="MyTable" border="1" cellspacing="0" cellpadding="0"></table>
	</div>
</div>

三、代码实现

整体框架结构出来后，下面要做的就是确定每个区域的高度，宽度，定位就算完成了。

首先确定下调用接口，调用时已经有table了，我们希望很简单的一行js即可高定，就用了一个方法实现。由于使用项目中table线宽全部都是1，所以未考虑其他线宽问题。

function FixTable(TableID, FixColumnNumber, width, height)

第一个参数：table的ID，第二个参数：要锁定的列数目，第三个参数：显示的宽度，第四个参数：显示的高度。

（一）首先创建上面所诉的框架出来：

		if ($("#" + TableID + "_tableLayout").length != 0) {
			$("#" + TableID + "_tableLayout").before($("#" + TableID));
			$("#" + TableID + "_tableLayout").empty();
		}
		else {
			$("#" + TableID).after("<div id='" + TableID + "_tableLayout' style='overflow:hidden;height:" 
+ height + "px; width:" + width + "px;'></div>");
		}
 
		$('<div id="' + TableID + '_tableFix"></div>'
					+ '<div id="' + TableID + '_tableHead"></div>'
					+ '<div id="' + TableID + '_tableColumn"></div>'
					+ '<div id="' + TableID + '_tableData"></div>').appendTo("#" + TableID + "_tableLayout");
 
 
		var oldtable = $("#" + TableID);
 
		var tableFixClone = oldtable.clone(true);
		tableFixClone.attr("id", TableID + "_tableFixClone");
		$("#" + TableID + "_tableFix").append(tableFixClone);
		var tableHeadClone = oldtable.clone(true);
		tableHeadClone.attr("id", TableID + "_tableHeadClone");
		$("#" + TableID + "_tableHead").append(tableHeadClone);
		var tableColumnClone = oldtable.clone(true);
		tableColumnClone.attr("id", TableID + "_tableColumnClone");
		$("#" + TableID + "_tableColumn").append(tableColumnClone);
		$("#" + TableID + "_tableData").append(oldtable);
 
		$("#" + TableID + "_tableLayout table").each(function () {
			$(this).css("margin", "0");
		});

（二）计算tableFix，tableHead的高度：

		var HeadHeight = $("#" + TableID + "_tableHead thead").height();
		HeadHeight += 2;
		$("#" + TableID + "_tableHead").css("height", HeadHeight);
		$("#" + TableID + "_tableFix").css("height", HeadHeight);

（三）计算tableFix，tableColumn的宽度：

		var ColumnsWidth = 0;
		var ColumnsNumber = 0;
		$("#" + TableID + "_tableColumn tr:last td:lt(" + FixColumnNumber + ")").each(function () {
			ColumnsWidth += $(this).outerWidth(true);
			ColumnsNumber++;
		});
		ColumnsWidth += 2;
		if ($.browser.msie) {
			switch ($.browser.version) {
				case "7.0":
					if (ColumnsNumber >= 3) ColumnsWidth--;
					break;
				case "8.0":
					if (ColumnsNumber >= 2) ColumnsWidth--;
					break;
			}
		}
		$("#" + TableID + "_tableColumn").css("width", ColumnsWidth);
		$("#" + TableID + "_tableFix").css("width", ColumnsWidth);

（四）为tableHead和tableColumn添加联动的滚动条事件：

		$("#" + TableID + "_tableData").scroll(function () {
			$("#" + TableID + "_tableHead").scrollLeft($("#" + TableID + "_tableData").scrollLeft());
			$("#" + TableID + "_tableColumn").scrollTop($("#" + TableID + "_tableData").scrollTop());
		});

（五）为较小的table修正样式：

		if ($("#" + TableID + "_tableHead").width() > $("#" + TableID + "_tableHead table").width()) {
			$("#" + TableID + "_tableHead").css("width", $("#" + TableID + "_tableHead table").width());
			$("#" + TableID + "_tableData").css("width", $("#" + TableID + "_tableHead table").width() + 17);
		}
		if ($("#" + TableID + "_tableColumn").height() > $("#" + TableID + "_tableColumn table").height()) {
			$("#" + TableID + "_tableColumn").css("height", $("#" + TableID + "_tableColumn table").height());
			$("#" + TableID + "_tableData").css("height", $("#" + TableID + "_tableColumn table").height() + 17);
		}

（六）为整体添加样式，定位：

		$("#" + TableID + "_tableFix").css({ "overflow": "hidden", "position": "relative"
, "z-index": "50", "background-color": "Silver" });
		$("#" + TableID + "_tableHead").css({ "overflow": "hidden", "width": width - 17, "position": "relative"
, "z-index": "45", "background-color": "Silver" });
		$("#" + TableID + "_tableColumn").css({ "overflow": "hidden", "height": height - 17, "position": "relative"
, "z-index": "40", "background-color": "Silver" });
		$("#" + TableID + "_tableData").css({ "overflow": "scroll", "width": width, "height": height, "position": "relative"
, "z-index": "35" });
 
		$("#" + TableID + "_tableFix").offset($("#" + TableID + "_tableLayout").offset());
		$("#" + TableID + "_tableHead").offset($("#" + TableID + "_tableLayout").offset());
		$("#" + TableID + "_tableColumn").offset($("#" + TableID + "_tableLayout").offset());
		$("#" + TableID + "_tableData").offset($("#" + TableID + "_tableLayout").offset());

完整代码如下:

//****************************************************************

 

function FixTable(TableID, FixColumnNumber, width, height) {
	/// <summary>
	///     锁定表头和列
	///     <para> sorex.cnblogs.com </para>
	/// </summary>
	/// <param name="TableID" type="String">
	///     要锁定的Table的ID
	/// </param>
	/// <param name="FixColumnNumber" type="Number">
	///     要锁定列的个数
	/// </param>
	/// <param name="width" type="Number">
	///     显示的宽度
	/// </param>
	/// <param name="height" type="Number">
	///     显示的高度
	/// </param>
	if ($("#" + TableID + "_tableLayout").length != 0) {
		$("#" + TableID + "_tableLayout").before($("#" + TableID));
		$("#" + TableID + "_tableLayout").empty();
	}
	else {
		$("#" + TableID).after("<div id='" + TableID + "_tableLayout' style='overflow:hidden;height:" + height + "px; width:" + width + "px;'></div>");
	}

	$('<div id="' + TableID + '_tableFix"></div>'
	+ '<div id="' + TableID + '_tableHead"></div>'
	+ '<div id="' + TableID + '_tableColumn"></div>'
	+ '<div id="' + TableID + '_tableData"></div>').appendTo("#" + TableID + "_tableLayout");


	var oldtable = $("#" + TableID);

	var tableFixClone = oldtable.clone(true);
	tableFixClone.attr("id", TableID + "_tableFixClone");
	$("#" + TableID + "_tableFix").append(tableFixClone);
	var tableHeadClone = oldtable.clone(true);
	tableHeadClone.attr("id", TableID + "_tableHeadClone");
	$("#" + TableID + "_tableHead").append(tableHeadClone);
	var tableColumnClone = oldtable.clone(true);
	tableColumnClone.attr("id", TableID + "_tableColumnClone");
	$("#" + TableID + "_tableColumn").append(tableColumnClone);
	$("#" + TableID + "_tableData").append(oldtable);

	$("#" + TableID + "_tableLayout table").each(function () {
		$(this).css("margin", "0");
	});


	var HeadHeight = $("#" + TableID + "_tableHead thead").height();
	HeadHeight += 2;
	$("#" + TableID + "_tableHead").css("height", HeadHeight);
	$("#" + TableID + "_tableFix").css("height", HeadHeight);


	var ColumnsWidth = 0;
	var ColumnsNumber = 0;
	$("#" + TableID + "_tableColumn tr:last td:lt(" + FixColumnNumber + ")").each(function () {
		ColumnsWidth += $(this).outerWidth(true);
		ColumnsNumber++;
	});
	ColumnsWidth += 2;
	if ($.browser.msie) {
		switch ($.browser.version) {
			case "7.0":
				if (ColumnsNumber >= 3) ColumnsWidth--;
				break;
			case "8.0":
				if (ColumnsNumber >= 2) ColumnsWidth--;
				break;
		}
	}
	$("#" + TableID + "_tableColumn").css("width", ColumnsWidth);
	$("#" + TableID + "_tableFix").css("width", ColumnsWidth);


	$("#" + TableID + "_tableData").scroll(function () {
		$("#" + TableID + "_tableHead").scrollLeft($("#" + TableID + "_tableData").scrollLeft());
		$("#" + TableID + "_tableColumn").scrollTop($("#" + TableID + "_tableData").scrollTop());
	});

	$("#" + TableID + "_tableFix").css({ "overflow": "hidden", "position": "relative", "z-index": "50", "background-color": "Silver" });
	$("#" + TableID + "_tableHead").css({ "overflow": "hidden", "width": width - 17, "position": "relative", "z-index": "45", "background-color": "Silver" });
	$("#" + TableID + "_tableColumn").css({ "overflow": "hidden", "height": height - 17, "position": "relative", "z-index": "40", "background-color": "Silver" });
	$("#" + TableID + "_tableData").css({ "overflow": "scroll", "width": width, "height": height, "position": "relative", "z-index": "35" });

	if ($("#" + TableID + "_tableHead").width() > $("#" + TableID + "_tableFix table").width()) {
		$("#" + TableID + "_tableHead").css("width", $("#" + TableID + "_tableFix table").width());
		$("#" + TableID + "_tableData").css("width", $("#" + TableID + "_tableFix table").width() + 17);
	}
	if ($("#" + TableID + "_tableColumn").height() > $("#" + TableID + "_tableColumn table").height()) {
		$("#" + TableID + "_tableColumn").css("height", $("#" + TableID + "_tableColumn table").height());
		$("#" + TableID + "_tableData").css("height", $("#" + TableID + "_tableColumn table").height() + 17);
	}

	$("#" + TableID + "_tableFix").offset($("#" + TableID + "_tableLayout").offset());
	$("#" + TableID + "_tableHead").offset($("#" + TableID + "_tableLayout").offset());
	$("#" + TableID + "_tableColumn").offset($("#" + TableID + "_tableLayout").offset());
	$("#" + TableID + "_tableData").offset($("#" + TableID + "_tableLayout").offset());
}

 

小菜鸟鹏
关注
专栏目录
案例 | iview中Table：拖拽适配列、自定义固定列、合并行
aningde的博客
04-07 2578
文 / 景朝霞 来源公号 / 朝霞的光影笔记 ID / zhaoxiajingjing 0 / 更新Table "iview": "2.13.0",对比最新版本的iview:4.1.3中的Table功能，获取最新功能：拖拽、合并行等。 【PS：由于一些原因不能统一升级整个iview，我动了源码这很不好，望大佬们不吝赐教更好的方案~】 1 / Table的拖拽适配列 在table.vue文件中h...
bootstrap-table-fixed-columns(css,js)
05-06
如有使用疑问，联系博主 bootstrap-table-fixed-columns.css固定列 冻结列
锁定表头和固定列(Fixed table head and columns)(转载)
ass2112128的博客
12-23 259
前段时间需要这个功能，但是找了很多都不能完美的实现，不是只能锁定表头，就是浏览器兼容问题什么的，在此就自己做了一个锁定表头和列的js方法，依赖于JQuery。 因为方法很简单，就未封装成插件的形式，仅仅以代码方式发布。这里把自己做的方式写出来，以资纪念。 支持IE6+，FF3.6+，Opera9+，Chrome9+ 一、实现方式 这里的准备使用4个table实现，具体...
Bootstrap Table 固定列插件使用教程
最新发布
gitblog_00353的博客
08-15 393
Bootstrap Table 固定列插件使用教程 bootstrap-table-fixed-columns项目地址:https://gitcode.com/gh_mirrors/bo/bootstrap-table-fixed-columns 项目介绍 bootstrap-table-fixed-columns 是一个用于固定表格头和列的插件，基于 Bootstrap Table 开发。该插...
bootstrap-table-fixed-columns.js
08-16
如有使用疑问，联系本人，如有使用疑问，
Bootstrap Table Fixed Columns 固定列
04-02
bootstrap 固定列需要引用的js和css，同时里面含有一个简单的例子
bootstrap-table-fixed-columns-v1.0.2.zip
06-08
FastAdmin使用bootstrap-table作为前端表格的基础组件库，通常列表交互展示已经够用了，包括通用搜索、排序、分页、导出、合并相同行/列等等。最近需要对表头进行冻结，找到了bootstrap-table-fixed-columns组件（也是bootstrap-table作者写的）能实现冻结效果，但带来了其他问题，包括：排序失效、列宽错位、合并行无效等，于是引入该组件的同时，顺便解决了这些问题，并且封装回原js中，使用时可以无忧无虑啦~
jquery 锁定表头和固定列(Fixed table head and columns)
11-27
前段时间需要这个功能，但是找了很多都不能完美的实现，不是只能锁定表头，就是浏览器兼容问题什么的，在此就自己做了一个锁定表头和列的js方法，依赖于JQuery。 因为方法很简单，就未封装成插件的形式，仅仅以代码...
bootstrap-table-fixed-columns.zip
01-14
`bootstrap-table-fixed-columns` 插件的工作原理是通过 JavaScript 和 CSS 实现表格的固定列效果。它会将表格的表头和内容部分分离，并在需要时添加额外的样式和布局，确保表头在滚动时始终保持可见。在实际应用中...
GridView(table) 滚动条 固定表头、列
人生在于奋斗；奋斗赢得人生
07-08 1467
开始在网上找了资料挺高兴，但是放在自己的ASP.NET代码中却产生奇怪的效果。经过测试摸索终于全部解决了，贴出来与大家一起分享。 解决了声明W3C标准时滚动条的问题 适易工作流、项目管理平台、基于XML配置的快速信息管理系统开发平台试用及下载地址：http://121.18.78
FixTable用例和源码
10-10
固定列头和固定表头的JS代码，支持IE6以上浏览器，只要注意使用容器的宽度和高度就可以玩转的简单插件。
bootstrap-table-fixed-columns冻结列，并完善排序、列宽和合并行
03-05
在原bootstrap-table-fixed-columns的基础上，解决了冻结列后，排序失效、列宽错位和合并行失效问题
冻结表格(tablefix)
Osiris
01-30 1763
/*  * jQuery TableFix plugin ver 1.0.0  * Copyright (c) 2010 Otchy  * This source file is subject to the MIT license.  * http://www.otchy.net  */ (function($){  $.fn.tablefix = function(options
Bootstrap Table Fixed Columns
weixin_34253126的博客
02-08 1224
最近在使用BootStrap 做项目前端，自然也用到了 Bootstrap Table。 推荐大家多去这个http://bootstrap-table.wenzhixin.net.cn/zh-cn/ 网站看看，上面有很详细的介绍以及其他扩展功能 下面写下Fixed Columns（固定列）的使用方法。附件下载地址：http://pan.baidu.com/s/1kUEQTPt 1.引用...
android tablefix,修正开源项目TableFixHeaders滑动不流畅的问题
weixin_42510222的博客
05-28 167
修正开源项目TableFixHeaders滑动不流畅的问题，有需要的朋友可以参考下。TableFixHeaders项目介绍： http://jcodecraeer.com/a/opensource/2014/1113/1970.html最近因为项目的原因，使用了TableFixHeaders来处理表格数据，却遇到了左右，上下滑动时，不够流畅的问题,，与系统提供的scrollView的滑动有着很大的...
Bootstrap Table Fixed Columns
淡丶漠的博客
12-11 3712
解决在使用原插件时出现的样式问题，增加支持tfoot的展示 bootstrap-table-fixed-columns.css .fixed-table-header-columns, .fixed-table-body-columns, .fixed-table-footer-columns { position: absolute; background-color: #...
bootstrap插件bootstrap-table-fixed-columns表格列左边右边固定及点击事件
qq_37363320的博客
06-09 1867
原文作者：https://www.weipxiu.com/7907.html 最近在老的后台项目用到表格固定列这个插件，但这个插件也相对老了，里面还是有些细节问题后续作者也没很好去维护支持，在此记录下我的解决方式 右侧列固定 这个问题分版本，并不是插件不支持，如果你是老版本，那只支持左侧固定，如果jQuery v1.11.0、bootstrap-table.js和bootstrap-table-fixed-columns.min.js是新v1.18.2（其他版本自测）就没问题 固定表格表头和列无法对齐 思路
bootstrap-table-fixed-columns.css
10-09
bootstrap-table-fixed-columns.css是Bootstrap框架中的一个CSS样式文件，它用于实现表格列固定的效果。 当我们在页面中使用bootstrap-table插件来展示包含大量数据的表格时，通常会遇到以下问题：表格宽度超出了...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值