通過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)