通过js实现固定表格的表头和某列
通过js实现固定表格的表头和某列
在开发过程中，如果数据⽐较多并且需要对⽐查看的情况下，⼀般是是需要固定表头和开始的某⼏列。可以通过⼀些组件进⾏实现。但是引⽤组件需要引⼊⼤量的js⽂件或者不满⾜某⼀⽅⾯的需求。这时候就需要⾃⼰动⼿写⼀个这样的效果。
需求
表格是页⾯的主体部分，表格的数据量⽐较⼤，需要表格左右可以滑动，上下也可以滑动。在滑动中表头固定，第⼀列，第⼆列固定。前两列在固定在页⾯上的前提下需要能够上下滑动。页⾯的滚动轮必须在窗⼝上，不可以设置在表格内部。
设计过程
具体实现
1. 元素结构
var TableWrap = ateClass({
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);
}
})
js控制滚动条说明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. 滚动条位于窗⼝，便于滑动

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。