JS实现Table表格数据跑马灯效果

工作中会经常碰到数据可视化看板需求,表格是最常用的展示方式,数据量大时会用到超出高度自行滚动,跑马灯效果展示是最好的,一般实现跑马灯效果会使用插件,但是会用到许多样式不协调问题,文章主要是用少量代码实现表格数据跑马灯效果

javascript 复制代码
<!-- 在index.ftl文件中使用table标签 -->
<div class="table-container">
        <table class="data-table">
            <thead>
                <tr>
                    <th>序号</th>
                    <th>品号</th>
                    <th>品名</th>
                    <th>规格</th>
                    <th>拣选信息</th>
                    <th>当前进度</th>
                    <th>仓库名称</th>
                </tr>
            </thead>
            <tbody id="dataTableBody">
            <!-- 动态插入行 -->
            </tbody>
        </table>
    </div>

<!-- 在index.ftl文件中引入js文件 -->
<script language="JavaScript" type="text/javascript" src="${base}/bigscreen/**/js/index.js"></script>

index.js文件

javascript 复制代码
$(document).ready(function () {
    // 初始化看板数据
    handleResponse (mockRes);
    // 初始化滚动效果
    scrollTable();
});


// 示例数据源
const dataSource = {
    items: [
        { id: 1, itemCode: "65611A", itemName: "洗剂1 200L", spec: "200L", pickInfo: "已拣选", progress: "完成", warehouse: "成品仓库I" },
        { id: 2, itemCode: "65613A", itemName: "洗剂2 200L", spec: "200L", pickInfo: "未拣选", progress: "进行中", warehouse: "成品仓库I" },
        { id: 3, itemCode: "65609A", itemName: "洗剂3 200L", spec: "200L", pickInfo: "未拣选", progress: "进行中", warehouse: "成品仓库I" },
        { id: 4, itemCode: "65474C", itemName: "洗衣粉1 25KG", spec: "25KG", pickInfo: "未拣选", progress: "进行中", warehouse: "仓库I" },
        { id: 5, itemCode: "65474C", itemName: "洗衣粉2 25KG", spec: "25KG", pickInfo: "未拣选", progress: "进行中", warehouse: "仓库I" },
        { id: 6, itemCode: "65478C", itemName: "漂剂 25KG", spec: "25KG", pickInfo: "未拣选", progress: "进行中", warehouse: "仓库I" },
        { id: 7, itemCode: "65478C", itemName: "彩漂剂 25KG", spec: "25KG", pickInfo: "未拣选", progress: "进行中", warehouse: "仓库I" },
        { id: 8, itemCode: "IC456", itemName: "物料B", spec: "中", pickInfo: "未拣选", progress: "进行中", warehouse: "仓库B" },
        { id: 9, itemCode: "IC456", itemName: "物料B", spec: "中", pickInfo: "未拣选", progress: "进行中", warehouse: "仓库B" },
        { id: 10, itemCode: "IC456", itemName: "物料B", spec: "中", pickInfo: "未拣选", progress: "进行中", warehouse: "仓库B" },
        { id: 11, itemCode: "IC456", itemName: "物料B", spec: "中", pickInfo: "未拣选", progress: "进行中", warehouse: "仓库B" },
        { id: 12, itemCode: "IC456", itemName: "物料B", spec: "中", pickInfo: "未拣选", progress: "进行中", warehouse: "仓库B" },
        { id: 13, itemCode: "IC456", itemName: "物料B", spec: "中", pickInfo: "未拣选", progress: "进行中", warehouse: "仓库B" },
        { id: 2, itemCode: "IC456", itemName: "物料B", spec: "中", pickInfo: "未拣选", progress: "进行中", warehouse: "仓库B" },
        { id: 2, itemCode: "IC456", itemName: "物料B", spec: "中", pickInfo: "未拣选", progress: "进行中", warehouse: "仓库B" },
        // 更多...
    ]
};

// 在开发环境中模拟响应
const mockRes = {
    data: {
        items: dataSource.items,
    }
};

// 填充清单表格数据
const handleResponse = (res) => {
    const tableBody = document.getElementById('dataTableBody');
    tableBody.innerHTML = ''; // 清空旧数据

// 假设 data.items 是包含多个条目的数组
    data.items.forEach((item, index) => {
    const row = document.createElement('tr');
    row.innerHTML = `
      <td>${index + 1}</td>
      <td>${item.itemCode || ''}</td>
      <td>${item.itemName || ''}</td>
      <td>${item.spec || ''}</td>
      <td>${item.pickInfo || ''}</td>
      <td>${item.progress || ''}</td>
      <td>${item.warehouse || ''}</td>
      `;
      tableBody.appendChild(row);
    });
};


//循环展示数据
function scrollTable() {
    const container = document.querySelector('.table-container');
    const tableBody = document.getElementById('dataTableBody');
    const rows = Array.from(tableBody.querySelectorAll('tr'));
    const scrollAmount = 2; // 每次滚动的像素数

    // 滚动表格
    container.scrollTop += scrollAmount;

    // 获取第一个和最后一个可见的行
    const firstVisibleRow = rows.find(row => row.getBoundingClientRect().top >=         
    container.getBoundingClientRect().top);
    const lastVisibleRow = rows.find(row => row.getBoundingClientRect().bottom <= 
    container.getBoundingClientRect().bottom + container.scrollTop);

    // 如果最后一个可见行已经滚动出视图,则将第一行移动到末尾
    if (!lastVisibleRow || lastVisibleRow.getBoundingClientRect().bottom < 
    container.getBoundingClientRect().top) {
        if (rows.length > 0) {
            const firstRow = rows[0];
            tableBody.appendChild(firstRow); // 将第一行移动到末尾
        }
    }

    // 递归调用函数以持续滚动
    setTimeout(scrollTable, 100); // 100毫秒后重复滚动
}
相关推荐
渴望脱下狼皮的羊5 分钟前
C++基础讲解
开发语言·c++·后端
Tttian6227 分钟前
Python办公自动化(4)对PPT&邮箱的操作
开发语言·python
我自纵横202312 分钟前
JavaScript 中常见的鼠标事件及应用
前端·javascript·css·html·计算机外设·ecmascript
li_Michael_li13 分钟前
Vue 3 模板引用(Template Refs)详解与实战示例
前端·javascript·vue.js
倒霉蛋小马18 分钟前
【Java集合】LinkedList源码深度分析
java·开发语言
pk_xz12345622 分钟前
python加载训练好的模型并进行叶片实例分割预测
开发语言·python
独好紫罗兰22 分钟前
洛谷题单3-P1075 [NOIP 2012 普及组] 质因数分解-python-流程图重构
开发语言·python·算法
编程咕咕gu-1 小时前
从零开始玩python--python版植物大战僵尸来袭
开发语言·python·python基础·pygame·python教程
柏木乃一1 小时前
双向链表增删改查的模拟实现
开发语言·数据结构·算法·链表
cherryc_2 小时前
JavaSE基础——第六章 类与对象(二)
java·开发语言