简单的html5与Rxjs实现table同时固定列和表头(for angular)
凡是参与大型项目开发,或者是企业级的系统,经常会遇到数据复杂,数据量大的问题。通常需要前端呈现大量的数据,而我们通常都会使用table去呈现。一目了然。可能很多人会问,现在的组件库不是很成熟了吗,各种各样的组件都有,功能强大且性能优越,如(element UI,anti design)。
但不是自己的,永远不是最适合自己的,就像你开着别人的法拉利,但是感觉却不如自己的面包车。
言归正传,其实是本人公司使用的组件库是公司内部自行研发的库,不使用网上流行的,这个什么原因我也不懂,我也不敢问。就有一个问题了,公司的table组件没有固定头和列的功能呀,怎么办,自己写一个呗。
红色部分通常需要固定,资料多的时候,会比较方便。
point
css positon属性sticky,
RXJS
Now
- 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>
- 添加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一样,固定表头和列。
[RXJS实战]使用RXJS管理Angular应用状态
q8462880赞 1阅读 1.7k
CSS transition 小技巧!如何保留 hover 的状态?
XboxYan赞 29阅读 3.5k评论 2
现代 CSS 之高阶图片渐隐消失术
chokcoco赞 25阅读 2.1k
给我实现一个前端的 Excel 导入和导出功能
熊的猫赞 19阅读 2.5k
「彻底弄懂」this全面解析
wuwhs赞 16阅读 1.9k
现代 CSS 指南 -- at-rule 规则扫盲
chokcoco赞 11阅读 1.8k
开局一张图,构建神奇的 CSS 效果
chokcoco赞 13阅读 2.1k评论 3
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。