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毫秒后重复滚动
}
相关推荐
火柴盒zhang3 分钟前
基于HTML CANVAS和EXCEL的xlsx文件展示工具websheet
前端·javascript·html·spreadsheet·websheet
泽02028 分钟前
C++入门(缺省参数/函数/引用)
开发语言·c++
Themberfue2 小时前
Redis ⑦-set | Zset
java·开发语言·数据库·redis·sql·缓存
__lost3 小时前
MATLAB画出3d的常见复杂有机分子和矿物的分子结构
开发语言·人工智能·matlab·化学·分子结构
夜夜敲码4 小时前
C语言教程(十八):C 语言共用体详解
c语言·开发语言
一城烟雨_5 小时前
vue3 实现将html内容导出为图片、pdf和word
前端·javascript·vue.js·pdf
大学生亨亨5 小时前
go语言八股文(五)
开发语言·笔记·golang
raoxiaoya5 小时前
同时安装多个版本的golang
开发语言·后端·golang
cloues break.6 小时前
C++进阶----多态
开发语言·c++
我不会编程5556 小时前
Python Cookbook-6.10 保留对被绑定方法的引用且支持垃圾回收
开发语言·python