博客

一、概述

在开发过程中前端列表展示数据对比查看的情况是比较常见的，我最近接到的一个任务就是要处理这样的数据；一般这种需求将某一列或几列进行横向固定然后其它不固定的列可以照常实现x轴的滚动；

• 话不多说先上图：
  
  
  
  

需求设计

• 这里实现了表格的x轴横向固定列和非固定列的滚动；
• 实现了表格y轴同步滚动；

实现思路

实现滚动条大家都知道怎么处理，但是设计固定列我一开始没有什么具体的想法，本来是考虑把比表格设计出来靠样式调试，但是这行不通（小伙伴如果弄好了请上）无论怎么调试具体的样式都是会出现不协调，（甚至很丑）；这里我思考了好久没有具体的查看别的小伙伴做的也不能实现将某几列进行固定（比如，固定第一，第三列，在同一表格中是很难实现的），这样思路就出来了，必须将需要固定的列单独拿出来，产生一个新的表格，这个新的表格作为x轴固定列；但是如果想将间隔的列进行固定这样子又不行了，每次的间隔产生都会产生两张表，这样子实现的并不理想（关于css隐藏的想法，其实是行不通的，如果后期对表格进行操作的话，这个会非常的影响），最后我还是将所有的固定列取出，创建了两张表格显示；接着就是y轴的同步滚动了，两张表的同步滚动只需要将相关的事件绑定到一起就ok了

结构示例

<div>
	<div>
		<table>
			<thead></thead>
			<tbody></tbody>
		</table>
	</div>
	<div>
		<table>
			<thead></thead>
			<tbody></tbody>
		</table>
	</div>
</div>

js实现部分代码

var TableClass = /** @class */ (function () {
    // 构造
    function TableClass(x1, x2) {
        this.x = x1;
        this.data = x2;
        this.z1 = 1;
    }
    //
    TableClass.setHtml = function (v1, v2, v3) {
        //生成元素
        var Dom = document.createElement(v1);
        //
        if (v2 != "") {
            Dom.innerText = v2;
        }
        //添加类名
        Dom.classList.add("sh-" + v1 + "-top");
        //添加事件事件
        if (typeof v3 == "function") {
            Dom.onclick = function () {
                v3();
            };
        }
        return Dom;
    };
    //生成表头
    TableClass.thead = function (t) {
        var arr1 = TableClass.getthead(t);
        var _loop_1 = function (i) {
            dom = TableClass.setHtml("td", arr1[i], function () { alert(arr1[i]); });
            t.x.appendChild(dom);
        };
        var dom;
        for (var i = 0; i < arr1.length; i++) {
            _loop_1(i);
        }
    };
    //获取表头数据
    TableClass.getthead = function (t) {
        var thData = [];
        if (t.data.length) {
            for (var v in t.data[0]) {
                thData.push(v);
            }
        }
        return thData;
    };
    //生成表主体
    TableClass.table = function (t) {
        ...
    };
    //生成表内容
    TableClass.tbody = function (t) {
        ...
    };
    //生成表底部
    TableClass.tbtom = function (t) {
        ...
    };
    //初始化
    TableClass.prototype.init = function () {
        ...
    };
    return TableClass;
}());

监听y轴滚动实现

代码实现 ：

var falg = true;
	$('#sh-table .sh-mian-class .sh-fixed-div > table tbody').on('mouseover',function(){
		falg = true;
	});
	$('#sh-table .sh-mian-class .sh-move-div > table tbody').on('mouseover',function(){
		falg = false;
	});
	$("#sh-table .sh-mian-class .sh-fixed-div > table tbody").scroll(function(){
		if (falg) {
			$("#sh-table .sh-mian-class .sh-move-div > table tbody").scrollTop($(this).scrollTop()); // 纵向滚动条
		}
    });
    $("#sh-table .sh-mian-class .sh-move-div > table tbody").scroll(function(){
    	if (!falg) {
	    	$("#sh-table .sh-mian-class .sh-fixed-div > table tbody").scrollTop($(this).scrollTop());
    	}
    });            

这里的falg 作为开关监听鼠标移入到哪张表中后，滚动当前的表另一张表也触发滚动事件，监听滚动事件一次滚动仅用falg判断执行一次

关于移入移出的 tr背景变换

tbody 中的 tr 移入移出这里就不推荐使用css的事件了，通过使用添加移除class 两张表的同名还是比较可行的；

这里的代码有一处小坑，大家有兴趣填一下啊

//监听移入移出的事件
	$('tbody tr').on('mouseover',function(){
		$("."+this.className).addClass("sh-bac");
	});
	$('tbody tr').on('mouseout',function(){
		$(".sh-bac").removeClass("sh-bac");
	});