我的位置：首页 › 一站式数据分析平台-亿信ABI › 亿信ABI-心得体验 › tab页内设置表格自动轮播

tab页内设置表格自动轮播

复制链接 | 收藏本帖

2199

: 玳玳我小试身手Lv3

发表于2021-9-18 17:33

楼主

   目前在普通分析表内，可以通过脚本实现表格自动轮播，具体可以参考帖子https://bbs.esensoft.com/thread-131595-1-1.html，但是在实际需求场景中，会有需要把表格放在tab页内的场景，这时由于轮播容器外层加上了tab页，帖子里的脚本就需要修改一下了，下面是在tab页内，多个表格自动轮播的脚本和表样参考下方
EUI.browser.isMobile = false;
/***
**表格内容自动轮播脚本
**@param tableDom 设置内容滚动的表格
**@param visibleHeight 可视区的高度
**@param refreshTime 定时刷新的时间
***/
function autoScrollTable(tableDom, visibleHeight, refreshTime) {
      var marqueesHeight = visibleHeight;
      var beginTime = new Date().getTime();
      var endTime = beginTime + refreshTime;
      var isEnd = false;
      var stopscroll = false;
      var scrollElem = tableDom;
      var preTop = 0;
      var currentTop = 0;
      var stoptime = 0;
      with (scrollElem) {
            style.height = parseFloat(marqueesHeight) + "px";
            style.overflow = 'hidden';
            noWrap = true;
      }
      var scrollUp = function () {
            if (stopscroll) {
                     setTimeout(scrollUp, 50);
                     return;
            }
            currentTop += 1;
            if(isEnd && new Date().getTime() >= endTime){
                  g_rptpage.cmd_calcReport();
                  return;
            }
            if (currentTop == (marqueesHeight + 1)) {
                     stoptime += 1;
                     currentTop -= 1;
                     if (stoptime == 1) {
                              currentTop = 0;
                              stoptime = 0;
                     }
            } else {
                     preTop = scrollElem.scrollTop;
                     scrollElem.scrollTop += 1;
                     if (preTop == scrollElem.scrollTop) {
                        isEnd = true;
                        if(new Date().getTime() >= endTime){
                              g_rptpage.cmd_calcReport();
                              return;
                        } else {
                              scrollElem.scrollTop = 0;
                              scrollElem.scrollTop += 1;
                        }
                     }
            }
            setTimeout(scrollUp, 50);
      };
      var restartScroll = function () {
            scrollElem.scrollTop = 0;
            setTimeout(scrollUp, 50);
      };
      jQuery(tableDom).hover(function () {
            stopscroll = true;
      }, function () {
            stopscroll = false;
      });
      setTimeout(restartScroll, 1000);
}
autoScrollTable(document.getElementById('GRID1'),document.getElementById('HHH2').clientHeight-document.getElementById('GRID3').clientHeight,8000);

autoScrollTable(document.getElementById('GRID4'),document.getElementById('HHH3').clientHeight-document.getElementById('GRID5').clientHeight,8000);

autoScrollTable(document.getElementById('GRID9'),document.getElementById('HHH3').clientHeight-document.getElementById('GRID5').clientHeight,8000);

autoScrollTable(document.getElementById('GRID7'),document.getElementById('HHH13').clientHeight-document.getElementById('GRID6').clientHeight,8000);
function getBodyWidthHeightAppendixToUrl(windoc) {
return "";
}