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毫秒后重复滚动
}
相关推荐
Dxy123931021629 分钟前
python创建一个excel文件
开发语言·python·excel
安心不心安31 分钟前
React ahooks——副作用类hooks之useThrottleFn
前端·javascript·react.js
朝朝又沐沐36 分钟前
算法竞赛阶段二-数据结构(40)数据结构栈的STL
开发语言·数据结构·c++·算法
秋田君42 分钟前
Vue3 + WebSocket网页接入弹窗客服功能的完整实现
前端·javascript·websocket·网络协议·学习
比特森林探险记1 小时前
Go语言常用的设计模式
开发语言·设计模式·golang
浪里行舟1 小时前
一网打尽 Promise 组合技:race vs any, all vs allSettled,再也不迷糊!
前端·javascript·vue.js
深海潜水员1 小时前
【Unity】背包系统 + 物品管理窗口 (上)
开发语言·vscode·游戏·unity·c#·游戏引擎
德育处主任Pro2 小时前
p5.js 用 beginGeometry () 和 endGeometry () 打造自定义 3D 模型
开发语言·javascript·3d
kyranhan2 小时前
C#程序本地运行正常,通过网络下载报错:FileLoadException:“未能加载文件或程序集“xxx.dll”或它的某一个依赖项。
开发语言·c#·wpf