客户要求实现对表格数据的头几行或者头几列进行冻结,即滚动时保持这几行/列不动,通过网上查找代码,参考已有的代码的思路,实现了可以任意对行、列进行冻结。
实现原理:
创建多个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下改变页面尺寸时,不能改变滚动区域的尺寸,一直不好解决,请大家帮着看看代码如何修改
注:上面问题已解决,代码已修改
相关推荐
HTML 实现行、列冻结功能,使用了javascript、jquery 的方式实现了类似excel冻结的功能。
table的行列冻结
页面显示表格,表格的首行冻结,首列冻结,最后一行也冻结,实现数据查看和合计查看的效果。DemoDemoDemoDemo
BootStrap-table 表格固定列,固定左侧列以及右侧列,可以固定特定的列,fixedColumns: true, fixedNumber: 2,fixedRightNumber:1,值可以自定义,一定要使用配套(压缩包就是配套的相关文件)的内容,否则会出现一些...
在原bootstrap-table-fixed-columns的基础上,解决了冻结列后,排序失效、列宽错位和合并行失效问题
基于bootstrap-table 实现 右侧列固定,也可以针对左侧列固定,针对操作列使用起来非常方便,引用jquery、bootstrap-table-fixed 样式和js文件后,可以随意设置,灵活。 fixedColumns: true,//fixedtNumber:2, //...
前几天有人问我,在Web开发当中,固定表格 的行和列,怎么做比较简单一点,我在这这里做了几个Demo,适用于table,当然也适用于各种表格控件。希望大家有时间看一下。Css学好是很重要的
javascript 绘制表格table,可以固定首行,首列,其他内容滚动显示.兼容ie,firefox,chrome等浏览器.
基于jquery的冻结行冻结列插件,可以支持复合表头,对原业务代码侵入较小,非常适合需要实现固定行列对table场景
引用JS,固定table的前n行及前n列, @*表格冻结*@ [removed] $(function () { $(".fixTable").tableHeadFixer({ "left": 0 }); $(".fixTable").tableHeadFixer({ "top": 1 }); }); [removed]
自己做项目需要经过网上学习 做出一个完整的下载粘贴即可用
该文件是基于html+css+javascript集成的轻量型table表格表头冻结滑动,通过js读取html中表格结构然后动态创建div或table来完成层叠拼接工作
html的table滚动时固定首行和首例,网上多为3个table拼合实现,现使用一个table实现
Ligerui Table 导出excel表格 (基于jquery) 1.支持原样式导出 2.支持带图片导出 3.支持固定行固定列导出
一款简单方便的插件,轻松引入,即可调用。有中文注释,便于理解。
实用 table + div + Jquery 实现,没有实用IE特有的expression(), 所以 兼容性 很好。...核心思想: 用JQuery的clone 复制 出 4张表, 分别放于 4 个 div 中来实现 水平 垂直 滚动, 首行 首列 冻结效果。
JS冻结窗格(表头锁定)插件,自适应表格单元格宽度,兼容主流浏览器(注:不兼容IE9以下版本的IE浏览器),代码调用方式 $.frozen(tableElement或tableId,{参数...},force:是否强制冻结,因为有防止重复冻结功能),...
layui数据表格自动换行,当设置固定列时,会出现行高不一致的问题,用户体验不好,只需要在页面中增加几行代码即可解决。
表格数据多时,在滚动表格的时候使行头和列头固定,以方便随时看到表格的头部。
利用一周的时间终于解决了,BootStrapTable 表格列头和内容不对其的问题。又需要的小伙伴来下载吧,替换原来的bootstrap-table.js即可