简单的html5与Rxjs实现table同时固定列和表头(for angular)

凡是参与大型项目开发,或者是企业级的系统,经常会遇到数据复杂,数据量大的问题。通常需要前端呈现大量的数据,而我们通常都会使用table去呈现。一目了然。可能很多人会问,现在的组件库不是很成熟了吗,各种各样的组件都有,功能强大且性能优越,如(element UI,anti design)。

但不是自己的,永远不是最适合自己的,就像你开着别人的法拉利,但是感觉却不如自己的面包车。

言归正传,其实是本人公司使用的组件库是公司内部自行研发的库,不使用网上流行的,这个什么原因我也不懂,我也不敢问。就有一个问题了,公司的table组件没有固定头和列的功能呀,怎么办,自己写一个呗。

2020-04-02 11_01_52-Window.png
红色部分通常需要固定,资料多的时候,会比较方便。

point

css positon属性sticky,
RXJS

Now

  1. design你的table。

在实现table的功能和呈现方式时,记得要注意,把head和body两部分分别用一个table来contain,即需要两个table。

<div class="table-responsive">
        <div #tableHeaderElement class="table-head-container">
            <table class="table">
                <thead>
                </thead>
            </table>
        </div>
        <div #tableBodyElement class="table-body-container">
            <table class="table">
                <tbody>
                </tbody>
            </table>
        </div>
    </div>

  1. 添加CSS属性(固定列)。

很简单只需要给需要固定的列(即td)加上

.table-fix {
    position: sticky;
    z-index: 1;
    left:0;
}

sticky粘性定位,
left设置你需要fix的列在table中的哪个位置。

3.Rxjs监控scoll事件(使head与body的scoll位置一致)

ngAfterViewInit() {
        this.ngZone.runOutsideAngular(() => {
            Observable.merge<MouseEvent>(
                this.tableHeaderNativeElement ? Observable.fromEvent<MouseEvent>(this.tableHeaderNativeElement, 'scroll') : Observable.empty(),
                this.tableBodyNativeElement ? Observable.fromEvent<MouseEvent>(this.tableBodyNativeElement, 'scroll') : Observable.empty()
            )
                .takeUntil(this.destroy$)
                .subscribe((data: MouseEvent) => {
                    this.syncScrollTable(data);
                });
        });
    }

syncScrollTable方法设置head和body的scrollLeft一致就OK了。
使用ngZone.runOutSideAngular方法是为了scoll事件脱离angular的变动检测机制(scoll事件的非常频繁,每一次scroll触发一次angular变更机制,必然对性能消耗巨大)。

好了现在可以试试,看看能不能跟excel一样,固定表头和列。

3 声望
1 粉丝
0 条评论
推荐阅读
[RXJS实战]使用RXJS管理Angular应用状态
==因为Node.js出现而衍生的前端框架逐渐走向成熟,各个框架之前互相借鉴良好的编程思想已经成为常态,目前React与Vue分别都有Redux,Vuex工具来管理应用程序数据状态,唯独Angular没有出现成熟稳定的状态管理工具,虽...

q84628801阅读 1.7k

CSS transition 小技巧!如何保留 hover 的状态?
欢迎关注我的公众号:前端侦探通常情况下,hover 是无法保存状态的。鼠标移入触发额外样式,一旦移出就还原了 {代码...} 这就意味着,如果需要保留hover的状态,可能就不得不借助JS了,比如下面是某某书院的首页...

XboxYan29阅读 3.5k评论 2

封面图
现代 CSS 之高阶图片渐隐消失术
在过往,我们想要实现一个图片的渐隐消失。最常见的莫过于整体透明度的变化,像是这样: {代码...} {代码...} 但是,CSS 的功能如此强大的今天。我们可以利用 CSS 实现的渐隐效果已经不再是如此的简单。想想看,...

chokcoco25阅读 2.1k

封面图
给我实现一个前端的 Excel 导入和导出功能
前言【负责人 A】:现在报表部分基于接口的 Excel 的导入和导出功能有点慢,前端这边能不能实现一下这个功能,然后我们在比对看看效果!【切图仔 B】: 接口这边不能优化一下吗?比如排查下慢的原因什么的。【负...

熊的猫19阅读 2.5k

封面图
「彻底弄懂」this全面解析
当一个函数被调用时,会创建一个活动记录(有时候也称为执行上下文)。这个记录会包含函数在 哪里被调用(调用栈)、函数的调用方法、传入的参数等信息。this就是记录的其中一个属性,会在 函数执行的过程中用到...

wuwhs16阅读 1.9k

封面图
现代 CSS 指南 -- at-rule 规则扫盲
其实不仅仅是上面的屏幕宽度媒体查询,在 CSS 中,存在大量的以 @ 符号开头的规则。称之为 @规则(at-rule)。本文就将介绍一下除去媒体查询之外,其他有意思的且在未来会越来越重要的 @规则 规则。

chokcoco11阅读 1.8k

封面图
开局一张图,构建神奇的 CSS 效果
假设,我们有这样一张 Gif 图:利用 CSS,我们尝试来搞一些事情。图片的 Glitch Art 风在这篇文章中 --CSS 故障艺术,我们介绍了利用混合模式制作一种晕眩感觉的视觉效果。有点类似于抖音的 LOGO。像是这样:假设...

chokcoco13阅读 2.1k评论 3

封面图
3 声望
1 粉丝
宣传栏