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 相关文章推荐
WordPress 插件——CoolCode使用方法与下载
Jul 02 Javascript
清除网页历史记录,屏蔽后退按钮!
Dec 22 Javascript
基于JQuery框架的AJAX实例代码
Nov 03 Javascript
使用SyntaxHighlighter实现HTML高亮显示代码的方法
Feb 04 Javascript
JavaScript判断DOM何时加载完毕的技巧
Nov 11 Javascript
AngularJS入门知识之MVW类框架的编程思想探讨
Dec 08 Javascript
javascript实现验证IP地址等相关信息代码
May 10 Javascript
关于session和cookie的简单理解
Jun 08 Javascript
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
Mar 30 Javascript
jQuery-Citys省市区三级菜单联动插件使用详解
Jul 26 jQuery
原生js实现下拉选项卡
Nov 27 Javascript
vue 通过base64实现图片下载功能
Dec 19 Vue.js
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实现生成验证码实例分享
2016/04/10 PHP
简单的jquery拖拽排序效果实现代码
2011/09/20 Javascript
jQuery写fadeTo示例代码
2014/02/21 Javascript
jQuery的cookie插件实现保存用户登陆信息
2014/04/15 Javascript
轻松创建nodejs服务器(4):路由
2014/12/18 NodeJs
JavaScript操作Cookie方法实例分析
2015/05/27 Javascript
最简单的JavaScript图片轮播代码(两种方法)
2015/12/18 Javascript
js实现页面跳转的几种方法小结
2016/05/16 Javascript
Node.js实现文件上传
2016/07/05 Javascript
理解JavaScript原型链
2016/10/25 Javascript
js实现自定义路由
2017/02/04 Javascript
layui框架table 数据表格的方法级渲染详解
2018/08/19 Javascript
使用Jenkins部署React项目的方法步骤
2019/03/11 Javascript
vue 实现搜索的结果页面支持全选与取消全选功能
2019/05/10 Javascript
我要点爆”微信小程序云开发之项目建立与我的页面功能实现
2019/05/26 Javascript
js实现计算器功能
2020/08/10 Javascript
swiper自定义分页器的样式
2020/09/14 Javascript
[01:01:36]Optic vs paiN 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python的字典和列表的使用中一些需要注意的地方
2015/04/24 Python
计算机二级python学习教程(1) 教大家如何学习python
2019/05/16 Python
Pandas之MultiIndex对象的示例详解
2019/06/25 Python
numpy ndarray 按条件筛选数组,关联筛选的例子
2019/11/26 Python
python logging 日志的级别调整方式
2020/02/21 Python
Python requests接口测试实现代码
2020/09/08 Python
Html5应用程序缓存(Cache manifest)
2018/06/04 HTML / CSS
英国航空官网:British Airways
2016/09/11 全球购物
西班牙最好的在线购买葡萄酒的商店:Vinoseleccion
2019/10/30 全球购物
Math.round(11.5)等於多少? Math.round(-11.5)等於多少?
2015/01/27 面试题
模具专业推荐信
2013/10/30 职场文书
技能比武方案
2014/05/21 职场文书
机械工程及其自动化专业求职信
2014/08/08 职场文书
创优争先心得体会
2014/09/11 职场文书
教师个人考察材料
2014/12/16 职场文书
煤矿安全生产工作总结
2015/08/13 职场文书
2019秋季运动会口号
2019/06/25 职场文书
nginx proxy_cache 缓存配置详解
2021/03/31 Servers