jquery实现表格列锁定
实现原理:
创建多个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","background-color": "white" });
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 id="reportTable" style="width:1900px" freezeRowNum="0" freezeColumnNum="3" class="report" border="1px">
..................
</table>
jquery实现表格列锁定相关推荐
- jquery计算表格列,求和
jquery计算表格列,求和 有时候,需要统计网页上数据总数,系统没有提供该功能,需要手动计算,于是设计了这段代码 效果展示: 核心代码: $(function() {var totalRow = 0 ...
- HTML中表格固定列锁定
本文主要介绍通过css实现表格固定列锁定及锁定后左右两个表格高度一致. 一.实现表格固定列的原理是,通过两个div,固定列div的css float设置成left,非固定列css overflow-x ...
- jquery获取表格中特定列
1 jQuery(this).closest("tr").find("td").eq(11).text() View Code 如果有一个表格,我们要用jque ...
- jquery对表格行列的操作-jquery动态增加表格行或者列
jquery对表格的操作是老生常谈的问题.最近项目中用到了,今天在这里分享一下! 效果大体如下: 分享一下代码吧! html <div class="table-responsive& ...
- JQuery 操作表格和JqGrid了解
登录 | 注册 mike_caoyong的专栏 目录视图 摘要视图 订阅 CSDN日报20170322--<关于软件研发的一些体会总结> 同步博客至 CSDN ,让更多开发者看到你的 ...
- 使用jquery合并表格中相同文本的相邻单元格
一.效果 二.代码 <!DOCTYPE HTML> <html> <head><title>Example</title><meta ...
- 我的jQuery动态表格插件二
本篇博客是我写在离职后,昨天刚辞职和交接完任务,准备离开.其实我有很多不舍,但是最终还是选择了离开,许多苦楚都埋在我的心底.哎,趁回成都找工作的机会是该好好休息一下了. 在上篇我的jQuery动态表格 ...
- 一个实用的表格(锁定表头,可调整单元格大小,可排序)
昨天在网上找到一个不错的表格显示,该表格可以锁定表头,可调整单元格的大小,同时还可以对数据进行排序,显示效果如下: 原代码: <!DOCTYPE HTML PUBLIC "-//W3C ...
- 手机端html表格,jQuery Mobile 表格
jQuery Mobile 表格 响应式表格 响应式设计一般用于适配用户各种移动设备. 我们只需要使用一个简单的类名,jQuery Mobile 就能根据屏幕的尺寸自动调整页面内容. 响应式表格让页面 ...
最新文章
- android 按下home键执行什么,Android下得到Home键按下的消息
- C#函数式程序设计之惰性列表工具——迭代器
- android签名的应用-- 禁止未经授权签名的apk安装
- 三级计算机系统是什么情况,三级PC技术: 计算机的组成和分类
- SpringBoot 根据传参返回不同的内容
- 全连接条件随机场_CRF条件随机场
- .NET Core开发实战(第25课:路由与终结点:如何规划好你的Web API)--学习笔记(上)...
- java akka_AKKA文档(java版)——什么是AKKA?
- Debugging a Create React App with VS Code
- 3D数学基础(二)| 向量
- 苹果手机运行html游戏,苹果手机如何运行PSP游戏方法
- C++实现求复数的模长
- 签名验签服务器的作用,签名验签服务器
- 生理自我、社会自我、心理自我的提出者,是詹姆斯还是奥尔波特?|小白心理-312/347考研答疑
- 定时将redis数据存入mysql_Python定时从Mysql提取数据存入Redis的实现
- python和c 情侣网名_可爱超萌的情侣网名 超可爱的情侣网名
- 2021 ICPC 四川省赛 L - Spicy Restaurant(多源BFS,DP)
- 【Linux词典】之磁盘命令(fdisk、gdisk、mkswap、mount、umount、df、lsblk)
- mac上最好用的5款epub阅读器
- 让chm文件每次都最大化打开的简单方法
热门文章
- 十进制转二进制定点小数MATLAB代码
- (附源码)计算机毕业设计ssm殡仪馆管理系统
- 解决报错:fatal: Authentication failed for ‘https://github.com/*/*.git/‘
- AdMob 可以为你带来多少广告变现收入?
- NOIP初赛准备:第6课时
- oracle pg 文件级迁移,Ora2pg 把oracle数据导入到postgres
- 【软件工程】十大模型
- 【贴吧】计算器代码注释
- skype wifi (android),Skype_Skype完整版下载[聊天工具]-下载之家
- 19 推荐一款连汤都不剩的家常烧鱼方法!