教你实现首行及首列固定 Table

最新推荐文章于 2023-12-11 21:13:24 发布

转载最新推荐文章于 2023-12-11 21:13:24 发布 · 2.1k 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000013261549

文章标签：

#java #javascript #移动开发 #ViewUI

本文介绍一种通过双Table叠加的方式实现表格顶部和左侧栏的悬浮效果。使用JavaScript监听滚动事件来同步调整悬浮部分的位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先秀一下 demo！此款 Table 源码~

表面上，在顶部及左侧悬挂两栏并非难事。但单元格尺寸根据其不确定的内容伸展，且顶部及左侧表头也应随之调整宽高。

Table 天然具备如此属性，我们可将 thead 剥离进行 fixed，但首列每一项分散在每一行，如何整体剥离？显然剥离较棘手，需转变思路。

定义新元素模拟首列并悬挂于左侧，但其单元格如何同步同行单元格高度？利用 js 获取当前行高度并赋值于首列元素，假定表格上千行便需如此操作上千次，过于麻烦...

一个 Table 难搞定，两个何如？我需要它们一模一样：

令 table1 与 table2 共享一套样式、数据便可一模一样（使两者同行同列元素尺寸同步）。将 table1 的 thead 剥离进行 fixed；table2 整体置为 fixed 覆盖于 table1 之上，并将 table2 除首列单元格外的其它元素置为透明。此时首行及首列悬挂完成了，但它们并未随表格主体的滚动而滚动。

动用 js 获取 window 滚动位置，scrollX 即为首行向左偏移距离，scrollY 为首列向上偏移距离：

var curX = 0;
var curY = 0;
$(window).on('scroll', function () {
    var scrollX = window.scrollX;
    var scrollY = window.scrollY;
    // 首行向左偏移 scrollX
    Math.abs(curX - scrollX) && $('.table1 .thead').css('left', -scrollX);
    // 首列向上偏移 scrollY（table2 仅首列非透明等同于整体偏移）
    Math.abs(curY - scrollY) && $('.table2').css('top', -scrollY);
    curX = scrollX;
    curY = scrollY;
});

讲解完毕！

作者：呆恋小喵

我的后花园：https://sunmengyuan.github.io...

我的 github：https://github.com/sunmengyuan

原文链接：https://sunmengyuan.github.io...