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 相关文章推荐
几个高效,简洁的字符处理函数
Apr 12 Javascript
javascript+mapbar实现地图定位
Apr 09 Javascript
Javascript下判断是否为闰年的Datetime包
Oct 26 Javascript
Raphael带文本标签可拖动的图形实现代码
Feb 20 Javascript
javascript正则表达式中的replace方法详解
Apr 20 Javascript
js为什么不能正确处理小数运算?
Dec 29 Javascript
Angular中$compile源码分析
Jan 28 Javascript
举例讲解jQuery中可见性过滤选择器的使用
Apr 18 Javascript
JS集成fckeditor及判断内容是否为空的方法
May 27 Javascript
纯js仿淘宝京东商品放大镜功能
Mar 02 Javascript
AngularJS 监听变量变化的实现方法
Oct 09 Javascript
JS实现压缩上传图片base64长度功能
Dec 03 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
php中强制下载文件的代码(解决了IE下中文文件名乱码问题)
2011/05/09 PHP
示例详解Laravel重置密码代码重构
2016/08/10 PHP
PHP使用mysqli操作MySQL数据库的简单方法
2017/02/04 PHP
PHP多线程模拟实现秒杀抢单
2018/02/07 PHP
php判断IP地址是否在多个IP段内
2020/08/18 PHP
javascript编程起步(第一课)
2007/01/10 Javascript
在js中使用"with"语句中跨frame的变量引用问题
2007/03/08 Javascript
JS input文本框禁用右键和复制粘贴功能的代码
2010/04/15 Javascript
JavaScript 参数中的数组展开 [译]
2012/09/21 Javascript
IE8提示Invalid procedure call or argument 异常的解决方法
2012/09/30 Javascript
js克隆对象、数组的常用方法介绍
2013/09/26 Javascript
jquery插件开发之实现md5插件
2014/03/17 Javascript
javascript生成随机数方法汇总
2015/11/12 Javascript
nodejs实现bigpipe异步加载页面方案
2016/01/26 NodeJs
javascript动画之模拟拖拽效果篇
2016/09/26 Javascript
jQuery文字轮播特效
2017/02/12 Javascript
Angular2使用Angular-CLI快速搭建工程(二)
2017/05/21 Javascript
详解layui中的树形关于取值传值问题
2018/01/16 Javascript
Vue动态加载异步组件的方法
2018/11/21 Javascript
如何给element添加一个抽屉组件的方法步骤
2019/07/14 Javascript
vue+vant实现商品列表批量倒计时功能
2020/01/13 Javascript
vue中使用WX-JSSDK的两种方法(推荐)
2020/01/18 Javascript
python使用xlrd实现检索excel中某列含有指定字符串记录的方法
2015/05/09 Python
Python IDLE 错误:IDLE''s subprocess didn''t make connection 的解决方案
2017/02/13 Python
利用Python如何批量更新服务器文件
2018/07/29 Python
win10系统下Anaconda3安装配置方法图文教程
2018/09/19 Python
浅谈python下含中文字符串正则表达式的编码问题
2018/12/07 Python
python tornado修改log输出方式
2019/11/18 Python
python os模块常用的29种方法使用详解
2020/06/02 Python
CSS3新属性transition-property transform box-shadow实例学习
2013/06/06 HTML / CSS
HTML5响应式(自适应)网页设计的实现
2017/11/17 HTML / CSS
意大利奢华内衣制造商:Cosabella
2017/08/29 全球购物
会计专业自荐信范文
2013/12/02 职场文书
蟋蟀的住宅教学反思
2014/04/26 职场文书
2014领导班子四风剖析对照检查材料思想汇报
2014/09/20 职场文书
2015年加油站工作总结
2015/05/13 职场文书