Layui 动态表格无缝循环滚动的实现

一、HTML

<div id="alarmTableContainer" style="height: calc(100% - 30px); margin: 10px;">
     <table id="alarmTable" class="layui-hide" lay-filter="alarmTable"></table>
</div>

二、前端代码如下所示：

// 表格滚动器
function TableScroller(tableContainer, interval) {
    // 响应鼠标事件
    let that = this;
    tableContainer.on(mouseover, function () {
        that.pause();
    });
    tableContainer.on(mouseleave, function () {
        that.resume();
    });

    // 隐藏表格滚动条
    let bodyContainer = tableContainer.find(.layui-table-body);
    bodyContainer.css(overflow-x, hidden);
    bodyContainer.css(overflow-y, hidden);

    this.timerID = null;
    this.interval = interval;
    this._bodyTable = bodyContainer.find(table);
    this._tbody = this._bodyTable.find(tbody);

    this.start = function () {
        let that = this;
        that.timerID = setInterval(function () {
            that._scroll(that._bodyTable, that._tbody, that.interval);
        }, that.interval);
    };
    this.pause = function () {
        let that = this;
        if (that.timerID === null) {
            return;
        }

        clearInterval(that.timerID);
        that.timerID = null;
    };
    this.resume = function () {
        let that = this;
        if (that.timerID !== null || that.callback === null || that.interval === null) {
            return;
        }

        that.timerID = setInterval(function () {
            that._scroll(that._bodyTable, that._tbody, that.interval);
        }, that.interval);
    };
    this.stop = function () {
        let that = this;
        if (this.timerID === null) {
            return;
        }

        clearInterval(that.timerID);
        that.callback = null;
        that.interval = null;
        that.timerID = null;
    };
    this._scroll = function (bodyTable, tbody, interval) {
        let firstRow = tbody.find(tr:first);
        let rowHeight = firstRow.height();
        bodyTable.animate({top: - + rowHeight + px}, interval * 0.5, function () {
            tbody.append(firstRow.prop("outerHTML"));
            bodyTable.css(top, 0px);
            firstRow.remove();
        });
    }
};

let alarmTableContainer = $(#alarmTableContainer);
layui.use([layer, table, util], function () {
    // 渲染表格控件
    table.render({
        page: false,
        loading: true,
        elem: #alarmTable,
        height: alarmTableContainer.height() - 16,
        data: tableData,
        cols: [[]],
        done: function (res, curr, count) {
            if (count > 4) {
                let scroller = new TableScroller(alarmTableContainer, 2000);
                scroller.start();
            }
        }
    });
});

三、运行效果如下所示：