簡單的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同樣，固定表頭和列。