通过js实现固定表格的表头和某列

通过js实现固定表格的表头和某列

在开发过程中，如果数据比较多并且需要对比查看的情况下，一般是是需要固定表头和开始的某几列。可以通过一些组件进行实现。但是引用组件需要引入大量的js文件或者不满足某一方面的需求。这时候就需要自己动手写一个这样的效果。

需求

表格是页面的主体部分，表格的数据量比较大，需要表格左右可以滑动，上下也可以滑动。在滑动中表头固定，第一列，第二列固定。前两列在固定在页面上的前提下需要能够上下滑动。页面的滚动轮必须在窗口上，不可以设置在表格内部。

设计过程

具体实现

1. 元素结构

 var TableWrap = React.createClass({
    render:function(){
     var data = this.props.data;
      return(
         <div className='table-wrapper'>
            <Header className = 'table-header' />
            <div className="table-body-wrapper">
     <Tablefix className = 'table-fixded' data = {data} />
     <Tablebody className='table-body' data = {data} />
    </div>
         </div>
      )
  }
 })

说明： 采用react-dom组件渲染dom元素，Header表示表头部分的table表格，Tablefix表示固定列的table表格，TableBody 表示正常可滚动部分的table表格

2. 表格联动

$(funciton autoWidth(){
  for(var i = 1 ; i <= $('.tablebody tr').length ; i++){
           var tableH = $(".tablebody tr:nth-child("+i+") td").outerHeight(true);
           $(".Tablefix tr:nth-child("+i+") td:last-child").css("height",tableH);
        }
})

说明1：采用outerHeight(true) 的目的是获取全部的高度，包括边框、padding、margin等
说明2：只需要设置对应行的一个td高度即可

3. 定位设计

$(function fixed(){
  $(window).scroll(function () {
        if($(this).scrollLeft()>0){
           if($(this).scrollLeft()<60){ //60用于控制灵敏度，数值越小 灵敏度越高
             $(".tablefix-wrapper").css("left","0px");
           }else {
             $(".tablefix-wrapper").css("left",$(this).scrollLeft());
           }
         }
         if($(this).scrollTop()>0){
           if ($(this).scrollTop()<60) {
             $(".header-wrapper").css("top","0px");
           }else {
             $(".header-wrapper").css("top",$(this).scrollTop());
           }
         }
     })
})

说明1：定位不使用fixed的原因定位后无法实现上下滑动的效果且固定列的表格和滚动表格无法实现滚动联动
说明2： .table-body-wrappe是相对定位 .header-wrapper和.tablefix-wrapper是相对于父级的绝对定位。采用绝对定位的目的是实现固定列的表格和滚动列表格的滚动联动效果。

展示效果

1. 实现表头上下固定，左右可以滚动
2. 实现固定列左右固定，上下可以滑动
3. 滚动条位于窗口，便于滑动

来自为知笔记(Wiz)