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

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

但不是本身的，永远不是最适合本身的，就像你开着别人的法拉利，可是感受却不如本身的面包车。

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

红色部分一般须要固定，资料多的时候，会比较方便。

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同样，固定表头和列。