Layui 动态表格单条循环滚动的实现

qq_34721505
已于 2024-03-08 16:17:43 修改
阅读量602
点赞数 2
文章标签： layui 前端 javascript
于 2024-03-08 16:11:34 首次发布
本文链接：https://blog.csdn.net/qq_34721505/article/details/136565044
版权
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Layui动态表格单条循环滚动</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link href="/static/css/font.css" rel="stylesheet">
    <link href="/static/css/weadmin.css" rel="stylesheet">
    <link href="/lib/layui/css/layui.css" rel="stylesheet" media="all">
    <script src="/lib/layui/layui.js" charset="utf-8"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <script src="/lib/layui/html5.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/lib/layui/respond.min.js" type="text/javascript" charset="utf-8"></script>
    <link id="changelink" rel="stylesheet" href="" />
    <script src="/static/js/app.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!-- 添加自定义CSS样式 -->
<style>
    .layui-table-box .layui-table-header th {
        background-color: #01AAED; /* 设置表头背景颜色 */
        color: #FAFAFA;  /* 设置字体颜色 */
        /*color: #B4D5FF;  !* 设置字体颜色 *!*/
        border-left: none;
    }
    h1 {
        text-align: center;
    }
</style>

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

  <script>
      function TableScroller(tableContainer, interval) {
          // 响应鼠标事件
          var that = this;
          tableContainer.on('mouseover', function () {
              that.pause();
          });
          tableContainer.on('mouseleave', function () {
              that.resume();
          });

          // 隐藏表格滚动条
          var 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 () {
              var that = this;
              that.timerID = setInterval(function () {
                  that._scroll(that._bodyTable, that._tbody, that.interval);
              }, that.interval);
          };
          this.pause = function () {
              var that = this;
              if (that.timerID === null) {
                  return;
              }

              clearInterval(that.timerID);
              that.timerID = null;
          };
          this.resume = function () {
              var 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 () {
              var 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) {
              debugger
              var firstRow = tbody.find('tr:first');
              // var firstRow = tbody.find('tr:even');
              var rowHeight = firstRow.height();
              bodyTable.animate({top: '-' + rowHeight + 'px'}, interval * 0.5, function () {
                  tbody.append(firstRow.prop("outerHTML"));
                  bodyTable.css('top', '0px');
                  firstRow.remove();
              });
          }
      };

      layui.use(['table','util'], function () {
          var table = layui.table;
          var layer = layui.layer;        
          var $ = layui.jquery;
          var alarmTableContainer = $('#alarmTableContainer');
          //第一个实例
          var tabBoard3 = table.render({
              elem: '#alarmTable'
              , url: '/api/webapi/kanban' //数据接口
              , page: false//开启分页         
              , done: function (res, curr, count) {// 表格渲染完成之后的回调
                  var that = this.elem.next();
                  res.data.forEach(function (item, index) {
                      if (index % 2 == 0) {
                          var tr = that.find(".layui-table-box tbody tr[data-index='" + index + "']").css("background-color", "#F4F4FA");
                      }
                  });

                  if (res.data.length > 10 || count > 10) { // 滚动显示
                      let scroller = new TableScroller(alarmTableContainer, 5000);
                      scroller.start();
                  }
              }

              ,cols: [[ //表头
          {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
      ,{field: 'username', title: '用户名', width:80}
      ,{field: 'sex', title: '性别', width:80, sort: true}
      ,{field: 'city', title: '城市', width:80} 
      ,{field: 'sign', title: '签名', width: 177}
      ,{field: 'experience', title: '积分', width: 80, sort: true}
      ,{field: 'score', title: '评分', width: 80, sort: true}
      ,{field: 'classify', title: '职业', width: 80}
      ,{field: 'wealth', title: '财富', width: 135, sort: true}
    ]]
          });
    });
   

  </script>

</body>
</html>