Java表格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)//获取tablevar tableId;if (typeof(table) == 'string') {tableId = table;table = $('#' + tableId);} elsetableId = 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); //克隆1tableFixClone.attr("id", tableId + "_tableFixClone");divTableFix.append(tableFixClone);}//行冻结生成的【冻结行DIV】【第三个DIV】if (divTableHead != null) {var tableHeadClone = table.clone(true);//克隆2tableHeadClone.attr("id", tableId + "_tableHeadClone");divTableHead.append(tableHeadClone);}//列冻结生成的【冻结列DIV】【第四个DIV】if (divTableColumn != null) {var tableColumnClone = table.clone(true);//克隆3tableColumnClone.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;elseignoreRowNum = 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;elsetableId = 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样式调整即可。
主要是设置冻结列或者行的高度和宽度,将冻结的列或者行正好盖住需要冻结的列或者行上边,即可实现冻结前几列或者前几行,其余行和列滚动!
Java表格Table冻结前几列或者前几行,其余行或列自由滑动。相关推荐
- html表格table冻结行和列
2019独角兽企业重金招聘Python工程师标准>>> 转自http://liyinlei.iteye.com/blog/2077714 这种固定行列的方式只适用于IE,并且只适用于 ...
- html表格冻结原理,HTML表格与冻结(可滚动)垂直和水平行/列
我想从json创建一个HTML表.我能够基于我找到的示例codepen生成我需要的确切格式.引发的JavaScript似乎创建了一个被调用的对象,该对象修改了包含div的CSS.用作静态数据的HTML ...
- JS组件系列——Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
JS组件系列--Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案 参考文章: (1)JS组件系列--Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案 (2) ...
- layui关闭表格编辑_Layui表格table关闭拖拽列宽、禁用拖拽列宽
table 模块是Layui的又一走心之作,在 layui 2.0 的版本中全新推出,是 layui 最核心的组成之一.它用于对表格进行一些列功能和动态化数据操作,涵盖了日常业务所涉及的几乎全部需求. ...
- vue计算多列和_解决vue 表格table列求和的问题
最近在给朋友做一个项目,因为是B端,所以少不了表格. 本身就用了element-ui,但是订单管理有个需求使用element-ui table组件实现不了,只能退而求其之用了原生的table,功能是几 ...
- html表格第一列长度,表格table列宽度控制colgroup
标签用于对表格中的列进行组合,以便对其进行格式化. 通过使用 标签,可以向整个列应用样式,而不需要重复为每个单元格或每一行设置样式. 注释:只能在 提示:如果想对 中的某列定义不同的属性,请在 标签内 ...
- html5表格两列合并_详解html中表格table的行列合并问题解决
这篇文章主要介绍了详解html中表格table的行列合并问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧 因为要做个网站, ...
- html如何冻结字段,利用jQuery实现HTML 表格行列冻结
摘要:行列冻结是处理表格非常常见的应用,我们都知道用excel可以很轻松的实现这一功能.但html编写的web网页表格中并没有冻结表格这一功能,那又要如何才能实现表格的 行 列 冻结呢? 行列冻结是处 ...
- html表格行列变化插件,利用jQuery实现HTML 表格行列冻结
摘要:行列冻结是处理表格非常常见的应用,我们都知道用excel可以很轻松的实现这一功能.但html编写的web网页表格中并没有冻结表格这一功能,那又要如何才能实现表格的 行 列 冻结呢? 行列冻结是处 ...
- html创建一个四行三列表单,HTML(三)表格table与表单form的基本使用
table的基本使用 表格的作用除了可以显示一个表格外,有的时候还可以用于辅助排版.以前的网页都是使用表格进行排版的,不过现在都不流行了,因为表格排版不利于网页结构. 1.新建表格 table就是表格 ...
最新文章
- Javascript 获取浏览器窗口中文档(视口)可用尺寸的方法
- NS_ASSUME_NONNULL_BEGIN,NS_ASSUME_NONNULL_END
- HDU 5890 Eighty seven(DP+bitset优化)
- 手把手教你使用Python生成图灵智能小伙伴
- C#通用类库--短信猫操作类1(原始AT命令)
- C++ rand,srand用法
- iOS NSString追加字符串的方法
- C语言|编程|判断素数
- verilog逻辑符
- 80核处理器_【装机帮扶站】第338期:95元的6核心12线程处理器
- 龙卷风路径_【龙卷风的防范措施】龙卷风的易发地点_龙卷风如何分级 - 妈妈网百科...
- 一年中所有节日的排列顺序_我国一年中的传统节日。(按顺序)
- [SAP ABAP开发技术总结]增强Enhancement
- MyBatis Plus Generator 代码生成器 v3.5.x 案例,含校验、MapStruct、Swagger、QO、VO,自定义 FreeMarker 模板引擎
- Conflux 创始人龙凡教授向浙江省委书记车俊汇报 Conflux 最新研发进展
- 蓝桥杯 平方和(JAVA)
- VS Code快速实现Git PR操作
- 宽带升级后,手机能连WiFi,电脑却连不上的解决办法 TC7102WiFi
- 【AD】破解WindowsServer2008R2 AD域控目录还原模式密
- 2022秋季 电影&书单
热门文章
- 前端共享博客(前端导航,前端博客,前端博客推荐)
- audacity音轨加伴奏_如何在Audacity中使用Crossfade进行音轨之间的无缝过渡
- 鸿合一体机触屏没反应怎么办_一体机屏幕触摸不准的原因以及解决方法
- usnews计算机专业排名2018,2018USNEWS计算机专业TOP50院校及官网地址
- 【OpenGL】各向异性过滤案例
- html caption属性的值,HTML中的caption属性是什么意思?caption标签在HTML中
- html怎么用2个caption不换行,caption怎么用
- wps右下角弹窗广告(WPS购物或叫WPS热点)彻底关闭
- java程序设计课后答案 刘慧宁_【单选题】建筑立面图中,室外地坪轮廓线应用( )。...
- 幼儿园故事导入语案例_幼儿语言活动方案优秀案例合集