Angular8 实现table表格表头固定效果
2020-02-13 10:06
579 查看
最近项目中有个需求,表头固定,内部实现滚动条。除了单个表头,还有多个表头的情况(下一篇中介绍)。
效果图:
html 结构
按区域划分可以分为三个大部分,一共是通过4个table 组合成一个整体的table。
然后通过 col 属性去设定列的宽度,注意:这里的宽度必须要设置为固定值。
表头过滤功能暂时未实现。
水平滚动效果与垂直滚动效果
监听主体table(浅绿色部分)滚动事件,同步上下滚动头部的table (深绿色部分)和 左右滚动左侧固定的table(红色部分中的紫色部分)
代码 1
$(this.tableContent.nativeElement).on('scroll', (e) => { $(this.fixedRowWrapper.nativeElement).prop('scrollTop', $(this.tableContent.nativeElement).prop('scrollTop')); //方式一 :设置头部固定列table 的滚动条,需要配合less 样式隐藏滚动条(如果不考虑ie9的兼容性,可以使用。less样式参考代码2) // $(this.tableHeader.nativeElement).prop('scrollLeft', $(this.tableContent.nativeElement).prop('scrollLeft')) // 方式二:设置头部固定列table 的margin-left 属性为负值,间接实现了头部固定的列同步向左滚动效果,兼容ie9 $(this.tableHeader.nativeElement).css({ marginLeft: `${-$(this.tableContent.nativeElement).prop('scrollLeft')}px` }) })
代码 2
.ngx-table__header-inner { // 隐藏滚动条,页面div 保持横向滚动,但是不支持ie9 ,为了兼容性所以没有使用,ts 中同步滚动 // 而是动态设置 ngx-table__header-inner 的margin-left 实现滚动效果 overflow: -moz-scrollbars-none; overflow-x: auto; -ms-overflow-style: none; &::-webkit-scrollbar { width: 0 !important; display: none; } }
完整代码地址
github项目地址,需要的可以点击访问 https://github.com/zjinger/ngx-TPR/tree/master/src/app/components/scroll-table
总结
以上所述是小编给大家介绍的Angular8 实现table表格表头固定效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
您可能感兴趣的文章:
相关文章推荐
- table表头和首列的表格固定-JQuery、js实现的Table表头固定
- 实现表格的固定列和表头的效果
- JS(JQ)实现table表格固定表头且表头可以随横向滚动而滚动
- JS(JQ)实现table表格固定表头且表头可以随横向滚动而滚动
- JS实现table表格固定表头且表头随横向滚动而滚动
- asp.net table表格表头及列固定实现
- table表头和首列的表格固定-CSS实现的Table表头固定
- 表格添加固定表头,js 实现 tableFixedHead.js
- 纯css实现table表格固定列和表头,中间横向滚动的思路-附案例
- table表头和首列的表格固定-CSS实现的Table表头固定
- 实现table表头固定 内容滚动效果
- css固定table表头的实现代码可同时看到表头和表格底部
- 纯css实现table表格固定列和表头,中间横向滚动的思路-附案例
- Asp.net 2.0 自定义控件开发[实现GridView多行表头固定表体滚动效果][示例代码下载]
- JS 实现简单的Table表格分页效果(假分页)
- div+css实现表头固定内容滚动表格
- VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
- Vue 实现表格搜索、固定表头与排序
- 表头固定和表格的左侧固定效果,有没有什么类型的更好的插件啊什么的,知道的推荐下
- 设计表头固定并且列宽可调整的Table表格