通過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. 滾動條位於視窗，便於滑動