乐趣区

关于前端:angular中利用css原生dom完成一个头部固定的表格

jiezi

先看图片吧

GIF 压缩的很厉害，原图是这样的

能够看到头部是固定的，并且各项不论是浏览器放大放大，各项都是固定的。

先来说说思路吧

首先这不是一个表格，这是两个表格，也就是其实头部和本体是各一个 table

<table class="tableHead">
 <tr *ngFor"let item of headData">
  <td>{{item.title}}</td>
 </tr>
</table>

<table class="tableBody">
 <tr *ngFor="let data of bodyData;let i = index" #element>
  <ng-container *ngFor="let item of headData">
   <span[innerHTML]="data[item.property]?data[item.property]:'--'"></span>
  </ng-container>
 </tr>

</table>

以下是简略的列表页数据

 headData:Array<any>=[{title:'操作',property:'checkbox',type:'checkbox',width:''},
    {title:'序号',property:'serial',type:'serial',width:''},
    {title:'信息类型',property:'infoType',type:'special',width:''},
    {title:'服务名称',property:'serviceName',type:'special',width:''},
    {title:"数据起源",property:'sourceName',type:'special',width:''},
    {title:"服务版本",property:'serviceVersion',width:''},
    {title:"服务形容",property:'description',width:''},
    {title:"注册单位",property:'register',width:''},
    {title:"注册工夫",property:'registerDate',width:''},
    {title:"服务状态",property:'status',type:'state',width:''},
  ]
  
  bodyData:Array<any>=[
    {
       infoType:'航行平安信息服务',serviceName:'航行通告',sourceName:'海上平安信息公布零碎',
       serviceVersion:'v1.0',description:'测试形容',register:'航测科技核心',registerDate:'20201-5-8 9:51',
       status:"0" ,infoTypeCode:'1',dataSourceId:'1',serviceId:'1',id:'1'
    },
    {
       infoType:'航行平安信息服务',serviceName:'航行通告',sourceName:'海上平安信息公布零碎',
       serviceVersion:'v1.0',description:'测试形容',register:'航测科技核心',registerDate:'20201-5-8 9:51',
       status:"0" ,infoTypeCode:'1',dataSourceId:'1',serviceId:'1',id:'1'
    },
  ]

页面上就是依据数据而后循环进去的列表，款式和具体的判断不表，此次仅仅只是阐明如何管制头部和本体的两个表格的宽度统一

思路就是在浏览器的大小扭转的时候，取得本体表格也就是 tableBody 的一行 tr 中的每一个 td 宽度，而后赋值给 headData 中的 width 属性，这样表格的宽度就会主动变动了

// 将 html 文件中的 #element 对象绑定，获取到其 dom
@ViewChild('element') navListElement: ElementRef;

ngAfterViewInit(){// 在初始化了组件的视图后执行
    this.setWidth()
    window.onresize=($event)=>{// 监听浏览器的窗口大小扭转事件
      this.setWidth()}
  }
  
 setWidth(){setTimeout(() => {// 利用定时器把以下操作往后推一个生命周期，不然有可能拿不到对象
      if(this.navListElement){
        let children = this.navListElement.nativeElement.children// 这一步拿到的是循环进去的第一个 tr 对象自身的所有后辈 也就是 tr 外面的 td
        for(let i = 0;i<children.length-1;i++){let item = children[i]
          // console.log('item.offsetWidth',item.offsetWidth);

          this.headData[i].width=item.offsetWidth// 将宽度赋值到 headData 的 width 中
        }
      }
    });
  }

这样就能够实现两个表格的宽度同步了，其余的问题比方解决滚动条的占位问题就暂且不表了，下次有机会再讲吧。

退出移动版