document.getElementById("fixTableHeader" + event.data.tIndex).scrollLeft = this.scrollLeft; } } 只能固定单行
$("#" + TableID + "_tableColumnClone").height($("#" + TableID).height()); } }; 效率低,固定双行或者行列用
前言 最近有个需求,渲染一个很复杂的table表格,不能用框架实现,使用原生table数据量一大就看不到表头需要固定表头,本篇文章当备份吧 代码 <html lang="zh-CN" class="">
我的原回答: https://github.com/alibaba/easyexcel/issues/874
前段时间需要这个功能,但是找了很多都不能完美的实现,不是只能锁定表头,就是浏览器兼容问题什么的,在此就自己做了一个锁定表头和列的js方法,依赖于JQuery。 4、在左上角覆盖固定不动的table,命名为tableFix。 代码如下
完整代码如下:
function FixTable(TableID, FixColumnNumber, width, height) {
///
但是当表格数据过多时,在同一个屏幕下无法完全展示,出现滚动条后,表头部分就被盖住,很容易不清楚看的当前列所代表的意义。 为了解决上述问题,可以想出一个办法就是当表头部分被滚动到浏览器外面,即不在显示区间中,则表头部分固定不动,表格内容滑动,这样就可以方便的清楚自己看的是哪一列了,同理,当浏览器宽度小于表格宽度时,则隐藏超出部分 ,让左侧一列固定,右侧部分可以滑动,则可以方便的知道自己看的是哪一行。 头部部分: m-con-left为左上角的表头部分 m-scroll-col为一列,每列包含三个m-type,分别是显示出来的三行(主要装备两行,市场指导价一行), 每一个m-scroll-col中的第一个 ").css("top",0); } $(window).resize(function(){ headTopPosition(); }); // 对比头部固定
return items1 } } }) </script> </body> </html> 如果配合Element UI表格插件实现搜索,排序与固定表头与表格左列
言归正传,表格是网页上比较常用的呈现数据的一种形式,表格的样式,排序,行动态背景,表头固定,列固定都是比较常见的需求,其实这点需求主要来自于Excel类(OpenOffice也有类似的)的用户体验。 如果你在百度,必应搜索“gridview固定表头”会发现很多结果,大部分都是过时的方法和插件,这浪费了我很多时间去实验和比较哪种更适合我。 淘汰了那些自己写的javascript片段,还有那些不紧固定表头,还必须固定表高的,我尝试了3个插件: FixedHeaderTable:http://www.fixedheadertable.com StickyTableHeaders:https://github.com/jmosbech/StickyTableHeaders 最终选择了这个:StickyTableHeaders,调用简单,无需复杂配置,表头固定非常好用 美中不足是当数据表长度列太多,表格行数太多,返回顶部时会出现明显的加载表头的过程。
window).resize(function () { duiqi(); }); }) </script> 缺点是每次滚动都是不停的计算scrollTop的值,把他赋给固定头的样式
由于表格比较长客户要求左侧的部分列要固定,以及头部固定,并有搜索排序功能,找了好久终于找到一个比较好的插件,DataTable,网站:https://datatables.net/download/index
固定表头 ? 1. 斑马纹 - UI 效果 斑马纹 就是指隔行换色 ? 2. 斑马纹 - API 接口 在
概述 在开发的时候,我们有时候会有这样的需求:由于表格的内容比较多,如果横竖都出现滚动条就看不到表头了,这就要求表格的表头和第一列固定,并且出现双向滚动条。 实现思路 1.区域划分 如下图,将整个表格分为四个区域:1、左上区域需要单独出来,因为此区域不参与滚动;2、上部表头,需要固定在顶部并且参与横向滚动;3、左边表头,需要滚动并且参与竖向滚动;4、表格主区域 ,会有横竖向的滚动,控制顶部和左边的表头。
WPF DataGrid 通过自定义表头模拟首行固定 独立观察员 2021 年 9 月 25 日 最近工作中要在 WPF 中做个表格,自然首选就是 DataGrid 控件了。 做好之后,工作地很好,可惜好景不长,同事提醒说数据多的话,出现滚动条,这一行要固定住,不过有个属性可以直接设置。 后来发现,他记错了,属性是有,不过是用来设置前几列固定的(FrozenColumnCount),而关于行固定,则没有提供任何相关功能。 经过搜索解决方案,发现没有能直接方便地使用的,有个国外大佬在问答网站上提供了尾行固定的方案,并且说了一句,首行固定更简单,只需要自定义表头就行了。 那就听他的吧,我们来看看怎么通过自定义表头,来达到模拟首行固定的效果。
当时遇见这个问题 是医院手麻系统大批量数据展示,由于是旧项目系统没有使用到前端的架构 只能使用JQ,JS, css完成 也谢谢给予我支持的同行们 固定首行数据: 采用函数的方式进行 JQ /** * 功能:固定表头 * 参数 viewid 表格的id * scrollid 滚动条所在容器的id * size 表头的行数(复杂表头可能不止一行) */ function scroll bak.style.backgroundColor = “#cfc”; // 设置div的display属性为block,即显示div(貌似也不是必须,但如果你不希望总是显示拷贝得来的表头 bak.style.top = “0px”; bak.style.width = “100%”; // 给滚动条容器绑定滚动条滚动事件,在滚动条滚动事件发生时,调整拷贝得来的表头的 FixedTitleRow” style=”width:100%;”>
(adsbygoogle = window.adsbygoogle || []).push({});
工作中或许会用到 table 表格固定表头, tbody 滚动的效果。为了方便我这里直接用的 Bootstrap 的表格样式。 ? 比较常用的方法是,将 table 的 thead 和 tbody 拆分成两个表格,用 div 包起来,给 div 设置固定高度和 overflow: auto; 属性(其实只给 tbody 的 table 至于对齐,可以使用 固定宽度,只需要给第一行设置一个宽度,下面的会自动与之对齐。如果表格宽度是 100% ,可以给前几列固定宽度,最后一个不设置,使其宽度自适应。
在Element UI的表格组件中,要想固定表头,必须给表格指定一个高度,但是用户的屏幕大小是不一样的,为了能将表格底部的分页区域始终显示在屏幕内,就需要动态计算表格的高度。
截屏2020-03-25下午5.02.21.png 大家好,今天我们将一起实践下如何手写固定表头,那么什么是固定表头呢?就类似 Excel 表格有个锁定表头的功能,方便用户查阅数据进行数据项的对比。 虽然有不少相关插件提供了类似的功能,比如 ScrollMagic.js,但是今天的实例,我们将用纯原生的方式进行实现,当滚动条滚动至表格位置,固定表头位置,表格内容查看完后,取消固定表头的功能。 今天我们将通过一个界面十分漂亮功能价格对比的表格,展示固定表头的功能,实例操作展示如视频所示,当滚动条滚动至表格位置,添加表头固定样式,当滚动至表格底部,移除固定表头样式。 HTML结构和CSS完成后,接下来我们编写脚本固定表头。 如果滚动条滚动至第三部分内容区域,我们将移除固定表头的样式stickyClass,添加移除固定表头的样式 sticky2-table。
固定头部:向下滚动,表头始终可见当数据行数较多,需要向下滚动查看时,固定头部功能让表头始终停留在顶部,无论滚动到哪里,都能清楚地知道每一列数据的含义。 适用场景:数据行数较多的报表需要频繁查看列标题的场景多维度数据分析报表配置简单: 只需在积木报表设计器中勾选 "固定头部" 选项,即可实现表头冻结,操作简单,效果立竿见影。2. 固定左侧:向左滚动,关键列始终可见当列数较多,需要向左滚动查看时,固定左侧功能让第一列或前几列关键信息始终停留在左侧,无论滚动到哪里,都能看到关键标识信息。 同时固定头部和左侧:全方位锁定,数据查看更轻松对于数据量大、列数多的复杂报表,可以同时固定头部和左侧,实现 "十字锁定" 效果。这样无论向哪个方向滚动,都能同时看到表头和关键列,数据查看更加直观高效。 无论是固定头部、固定左侧,还是同时固定,都能根据实际需求灵活配置,让表头 "站住不动",数据查看更轻松。