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

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

效果图:

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

时间: 2020-01-02

AngularJS ng-table插件设置排序

基础概念 ng-table提供了一个表头来提供,基础的过滤信息: (1)指定一列的过滤器,然后模板就会使用. (2)ngTable支持number, text, select 和 select-multiple的值模板. (3)可以有选择的为NgTableParams提供初始过滤值. <div class="row"> <div class="col-md-6" ng-controller="demoController as demo&

angularjs表格ng-table使用备忘录

项目中用到angularjs的表格ng-table,功能相当强大,像搜索.排序.checkbox.分页.每页表格显示数目等都有.API,demo什么的也只能参考官网了.这里做个备忘,哪天肯定还会用到. HTML: <!DOCTYPE html> <html> <meta charset="utf-8"/> <head> <script data-require="angular.js@*" data-semver

AngularJS中table表格基本操作示例

本文实例讲述了AngularJS表格基本操作.分享给大家供大家参考,具体如下: css内容: table, td { border: 1px solid grey; border-collapse: collapse; padding: 5px; } HTML正文: <body ng-app=""> <div ng-init="persons=[{'name':'zhangsan','age':'20'}, {'name':'lisi','age':'19'

angularJs中datatable实现代码

本文介绍了angularJs中datatable实现,有需要的小伙伴可以参考下 html引用derective: 复制代码 代码如下: <table datatable dtOptions="dtOptionsExample2" class="table table-striped m-b-none"></table> controller设置: $scope.dtOptions = { "bProcessing": tr

Angularjs+bootstrap+table多选(全选)支持单击行选中实现编辑、删除功能

最终实现效果: index.html <!DOCTYPE html> <html> <head> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animat

BootStrap table表格插件自适应固定表头(超好用)

首先是简单的页面形式,大家可以按照平常画表格的方式来创建html表格,然后通过js控制特殊的样式等操作(优点是表格更加直观,方便调整表格样式等,速度快) 当然,也可以只在页面上放一个table标签,之后的所有数据和样式都通过js控制也是可以的,后面会说(优点方便控制修改数据,尤其是ajax方式获取的json格式,但是调整样式比较麻烦) ps:这个是插件的官网,里面有英文api和例子:http://bootstrap-table.wenzhixin.net.cn/zh-cn/ 还有,使用前请引入b

Angular 4依赖注入学习教程之Injectable装饰器(六)

学习目录 Angular 4 依赖注入教程之一 依赖注入简介 Angular 4 依赖注入教程之二 组件服务注入 Angular 4 依赖注入教程之三 ClassProvider的使用 Angular 4 依赖注入教程之四 FactoryProvider的使用 Angular 4 依赖注入教程之五 FactoryProvider配置依赖对象 Angular 4 依赖注入教程之六 Injectable 装饰器 Angular 4 依赖注入教程之七 ValueProvider的使用 Angular

Angular 4 依赖注入学习教程之FactoryProvider的使用(四)

学习目录 Angular 4 依赖注入教程之一 依赖注入简介 Angular 4 依赖注入教程之二 组件服务注入 Angular 4 依赖注入教程之三 ClassProvider的使用 Angular 4 依赖注入教程之四 FactoryProvider的使用 Angular 4 依赖注入教程之五 FactoryProvider配置依赖对象 Angular 4 依赖注入教程之六 Injectable 装饰器 Angular 4 依赖注入教程之七 ValueProvider的使用 Angular

Angular 4依赖注入学习教程之ClassProvider的使用(三)

学习目录 Angular 4 依赖注入教程之一 依赖注入简介 Angular 4 依赖注入教程之二 组件服务注入 Angular 4 依赖注入教程之三 ClassProvider的使用 Angular 4 依赖注入教程之四 FactoryProvider的使用 Angular 4 依赖注入教程之五 FactoryProvider配置依赖对象 Angular 4 依赖注入教程之六 Injectable 装饰器 Angular 4 依赖注入教程之七 ValueProvider的使用 Angular

Angular 4依赖注入学习教程之ValueProvider的使用(七)

学习目录 Angular 4 依赖注入教程之一 依赖注入简介 Angular 4 依赖注入教程之二 组件服务注入 Angular 4 依赖注入教程之三 ClassProvider的使用 Angular 4 依赖注入教程之四 FactoryProvider的使用 Angular 4 依赖注入教程之五 FactoryProvider配置依赖对象 Angular 4 依赖注入教程之六 Injectable 装饰器 Angular 4 依赖注入教程之七 ValueProvider的使用 Angular

Angular 4依赖注入学习教程之InjectToken的使用(八)

学习目录 Angular 4 依赖注入教程之一 依赖注入简介 Angular 4 依赖注入教程之二 组件服务注入 Angular 4 依赖注入教程之三 ClassProvider的使用 Angular 4 依赖注入教程之四 FactoryProvider的使用 Angular 4 依赖注入教程之五 FactoryProvider配置依赖对象 Angular 4 依赖注入教程之六 Injectable 装饰器 Angular 4 依赖注入教程之七 ValueProvider的使用 Angular

Angular 4依赖注入学习教程之FactoryProvider配置依赖对象(五)

学习目录 Angular 4 依赖注入教程之一 依赖注入简介 Angular 4 依赖注入教程之二 组件服务注入 Angular 4 依赖注入教程之三 ClassProvider的使用 Angular 4 依赖注入教程之四 FactoryProvider的使用 Angular 4 依赖注入教程之五 FactoryProvider配置依赖对象 Angular 4 依赖注入教程之六 Injectable 装饰器 Angular 4 依赖注入教程之七 ValueProvider的使用 Angular

Angular 4依赖注入学习教程之组件服务注入(二)

学习目录 Angular 4 依赖注入教程之一 依赖注入简介 Angular 4 依赖注入教程之二 组件服务注入 Angular 4 依赖注入教程之三 ClassProvider的使用 Angular 4 依赖注入教程之四 FactoryProvider的使用 Angular 4 依赖注入教程之五 FactoryProvider配置依赖对象 Angular 4 依赖注入教程之六 Injectable 装饰器 Angular 4 依赖注入教程之七 ValueProvider的使用 Angular

Angular 4依赖注入学习教程之简介(一)

学习目录 Angular 4 依赖注入教程之一 依赖注入简介 Angular 4 依赖注入教程之二 组件服务注入 Angular 4 依赖注入教程之三 ClassProvider的使用 Angular 4 依赖注入教程之四 FactoryProvider的使用 Angular 4 依赖注入教程之五 FactoryProvider配置依赖对象 Angular 4 依赖注入教程之六 Injectable 装饰器 Angular 4 依赖注入教程之七 ValueProvider的使用 Angular

PHP内核学习教程之php opcode内核实现

opcode是计算机指令中的一部分,用于指定要执行的操作, 指令的格式和规范由处理器的指令规范指定. 除了指令本身以外通常还有指令所需要的操作数,可能有的指令不需要显式的操作数. 这些操作数可能是寄存器中的值,堆栈中的值,某块内存的值或者IO端口中的值等等. 通常opcode还有另一种称谓:字节码(byte codes). 例如Java虚拟机(JVM),.NET的通用中间语言(CIL: Common Intermeditate Language)等等. 1. Opcode简介 opcode是计算

Angular4学习教程之DOM属性绑定详解

前言 DOM 元素触发的一些事件通过 DOM 层级结构传播,事件首先由最内层的元素开始,然后传播到外部元素,直到它们到根元素,这种传播过程称为事件冒泡.本文主要介绍了关于Angular4 DOM属性绑定的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 简介 使用插值表达式将一个表达式的值显示在模版上 <img src="{{imgUrl}}" alt=""> <h1>{{productTitle}}</h1&