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技术-屏蔽类
Aug 15 Javascript
js 提交和设置表单的值
Dec 19 Javascript
javascript Array.prototype.slice使用说明
Oct 11 Javascript
表单的焦点顺序tabindex和对应enter键提交
Jan 04 Javascript
JQuery教学之性能优化
May 14 Javascript
ie 7/8不支持trim的属性的解决方案
May 23 Javascript
ECMAScript 6即将带给我们新的数组操作方法前瞻
Jan 06 Javascript
JS控制FileUpload的上传文件类型实例代码
Oct 07 Javascript
Bootstrap基本插件学习笔记之Alert警告框(20)
Dec 08 Javascript
AngularJS基于http请求实现下载php生成的excel文件功能示例
Jan 23 Javascript
vue数据操作之点击事件实现num加减功能示例
Jan 19 Javascript
layui实现下拉框三级联动
Jul 26 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在页面中调用fckeditor编辑器的方法
2011/06/10 PHP
PHP入门教程之操作符与控制结构流程详解
2016/09/09 PHP
PHP流Streams、包装器wrapper概念与用法实例详解
2017/11/17 PHP
php微信开发之图片回复功能
2018/06/14 PHP
javascript AOP 实现ajax回调函数使用比较方便
2010/11/20 Javascript
不使用XMLHttpRequest实现异步加载 Iframe和script
2012/10/29 Javascript
javascript中如何处理引号编码"
2013/08/15 Javascript
jquery实现一个简单好用的弹出框
2014/09/26 Javascript
jQuery中:focus选择器用法实例
2014/12/30 Javascript
js实现全国省份城市级联下拉菜单效果代码
2015/09/07 Javascript
JQuery插件Marquee.js实现无缝滚动效果
2016/04/26 Javascript
Javascript闭包与函数柯里化浅析
2016/06/22 Javascript
浅谈Angular的$q, defer, promise
2016/12/20 Javascript
JS实现双击内容变为可编辑状态
2017/03/03 Javascript
Angular.js中$resource高大上的数据交互详解
2017/07/30 Javascript
详解Vue CLI3配置解析之css.extract
2018/09/14 Javascript
详解用JS添加和删除class类名
2019/03/25 Javascript
微信小程序基于高德地图查找位置并显示文字
2019/10/30 Javascript
Python pickle类库介绍(对象序列化和反序列化)
2014/11/21 Python
详解Django框架中用context来解析模板的方法
2015/07/20 Python
浅述python中argsort()函数的实例用法
2017/03/30 Python
PyQt 线程类 QThread使用详解
2017/07/16 Python
Python 读写文件的操作代码
2018/09/20 Python
python-web根据元素属性进行定位的方法
2019/12/13 Python
深度学习入门之Pytorch 数据增强的实现
2020/02/26 Python
Python 多进程原理及实现
2020/12/21 Python
python解决OpenCV在读取显示图片的时候闪退的问题
2021/02/23 Python
英国大码女性时装零售商:Evans
2018/08/29 全球购物
iKRIX意大利网上商店:男女豪华服装和配件
2019/10/09 全球购物
高三家长寄语
2014/04/03 职场文书
2014年信贷员工作总结
2014/11/18 职场文书
2015年安全生产责任书
2015/01/30 职场文书
毕业生登记表班级意见
2015/06/05 职场文书
2015小学教育教学工作总结
2015/07/21 职场文书
《兰兰过桥》教学反思
2016/02/20 职场文书
JavaScript offset实现鼠标坐标获取和窗口内模块拖动
2021/05/30 Javascript