Angular8 实现table表格表头固定效果


Posted in Javascript onJanuary 03, 2020

最近项目中有个需求,表头固定,内部实现滚动条。除了单个表头,还有多个表头的情况(下一篇中介绍)。

效果图:

Angular8 实现table表格表头固定效果

html 结构

Angular8 实现table表格表头固定效果

按区域划分可以分为三个大部分,一共是通过4个table 组合成一个整体的table。
然后通过 col 属性去设定列的宽度,注意:这里的宽度必须要设置为固定值。
表头过滤功能暂时未实现。

Angular8 实现table表格表头固定效果

水平滚动效果与垂直滚动效果

监听主体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表格表头固定效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
javascript学习笔记(七)利用javascript来创建和存储cookie
Apr 08 Javascript
Javascript核心读书有感之词法结构
Feb 01 Javascript
AngularJS的一些基本样式初窥
Jul 27 Javascript
全面了解构造函数继承关键apply call
Jul 26 Javascript
微信小程序 slider 详解及实例代码
Jan 10 Javascript
详解用node-images 打造简易图片服务器
May 08 Javascript
jquery实现图片轮播器
May 23 jQuery
AngularJS解决ng-if中的ng-model值无效的问题
Jun 21 Javascript
基于three.js编写的一个项目类示例代码
Jan 05 Javascript
微信小程序人脸识别功能代码实例
May 07 Javascript
如何在Vue项目中添加接口监听遮罩
Jan 25 Vue.js
使用 JavaScript 制作页面效果
Apr 21 Javascript
uni-app 支持多端第三方地图定位的方法
Jan 03 #Javascript
Vue 实现登录界面验证码功能
Jan 03 #Javascript
JS实现扫码枪扫描二维码功能
Jan 03 #Javascript
file-loader打包图片文件时路径错误输出为[object-module]的解决方法
Jan 03 #Javascript
uni-app如何实现增量更新功能
Jan 03 #Javascript
JS实现简单日历特效
Jan 03 #Javascript
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
Jan 02 #Javascript
You might like
Apache2 httpd.conf 中文版
2006/11/17 PHP
四种php中webservice实现的简单架构方法及实例
2015/02/03 PHP
PHP中字符安全过滤函数使用小结
2015/02/25 PHP
php使用Jpgraph绘制柱形图的方法
2015/06/10 PHP
在Mac上编译安装PHP7的开发环境
2015/07/28 PHP
PHP实现动态创建XML文档的方法
2018/03/30 PHP
PHP时间戳和日期相互转换操作实例小结
2018/12/18 PHP
解析Jquery的LigerUI如何实现文件上传
2013/07/09 Javascript
javascript完美拖拽的实现方法
2013/09/29 Javascript
javascript 中that的含义示例介绍
2014/05/14 Javascript
jquery自定义右键菜单、全选、不连续选择
2016/03/01 Javascript
ReactJs快速入门教程(精华版)
2016/11/28 Javascript
原生js实现电商侧边导航效果
2017/01/19 Javascript
Vue.js实战之使用Vuex + axios发送请求详解
2017/04/04 Javascript
详解Angular2响应式表单
2017/06/14 Javascript
集合Bootstrap自定义confirm提示效果
2017/09/19 Javascript
细说webpack源码之compile流程-rules参数处理技巧(1)
2017/12/26 Javascript
在vue项目中使用element-ui的Upload上传组件的示例
2018/02/08 Javascript
vue.js中created方法作用
2018/03/30 Javascript
使用vue-cli脚手架工具搭建vue-webpack项目
2019/01/14 Javascript
vue开发chrome插件,实现获取界面数据和保存到数据库功能
2020/12/01 Vue.js
python将html转成PDF的实现代码(包含中文)
2013/03/04 Python
django1.8使用表单上传文件的实现方法
2016/11/04 Python
Python cookbook(数据结构与算法)从序列中移除重复项且保持元素间顺序不变的方法
2018/03/13 Python
Python 25行代码实现的RSA算法详解
2018/04/10 Python
python读取有密码的zip压缩文件实例
2019/02/08 Python
python程序变成软件的实操方法
2019/06/24 Python
Python爬虫爬取Bilibili弹幕过程解析
2019/10/10 Python
Windows下Anaconda和PyCharm的安装与使用详解
2020/04/23 Python
Django实现前台上传并显示图片功能
2020/05/29 Python
手把手教你从PyCharm安装到激活(最新激活码),亲测有效可激活至2089年
2020/11/25 Python
简述Linux文件系统通过i节点把文件的逻辑结构和物理结构转换的工作过程
2012/04/17 面试题
个人应聘自我评价分享
2013/11/18 职场文书
培训楼经理岗位责任制
2014/02/10 职场文书
1亿有多大教学反思
2014/05/01 职场文书
小学教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书