我的位置：首页 › 大数据分析-亿信BI › BI-心得体验 › 报表模板——走马灯，滚动表格，表格轮播 ...

报表模板——走马灯，滚动表格，表格轮播

复制链接 | 收藏本帖

12372

: tangmq 数据达人Lv4

发表于2019-5-21 16:54

楼主

本帖最后由 tangmq 于 2019-9-27 14:00 编辑

/***
**表格内容自动轮播脚本
**@param tableDom内容滚动的表格，最好是表格的父DIV
**@param visibleHeight 可视区的高度
***/
function autoScrollTable(gridId){
var timer = null;
var stopped = false;
var grid2 = document.getElementById(gridId);
var table = getChildNodeAt(grid2,"table",0);
var moveFirst2Last = function(){
var firstRow = table.rows[0].cloneNode(true);
if(!stopped){
var height = 0-$(table.rows[0]).height();
$("#"+gridId).animate({top:height+"px"},2000,function(){
table.appendChild(firstRow);
table.deleteRow(0);
$("#"+gridId).css("top","0px");
timer = setTimeout(moveFirst2Last,20);
});
}else{
timer = setTimeout(moveFirst2Last,20);
}
};
var stopTableScroll = function(){
stopped =true;
};
var startTableScroll = function(){
stopped = false;
};
startTableScroll();
moveFirst2Last();
jQuery(table).hover(stopTableScroll,startTableScroll);
}
autoScrollTable("GRID1");
autoScrollTable("GRID3");

复制代码

-

autoScrollTable("GRID1");
autoScrollTable("GRID3");
最后这两行代码是指定需要滚动的表格代号，可以多个表格同时滚动，超级腻害
参考表样

BI4.7.rar (2.39 KB, 下载次数: )

ABI上如果也有类似需求，脚本需要作出调整
参考表样

BI4.7.rar (2.39 KB, 下载次数: )
脚本内容，参考楼下三楼的回复

ABI.rar (6.11 KB, 下载次数: )

最近看过此主题的会员

QQ空间微信

13个回答

只看楼主

: 社区小辣妹小试身手Lv3

发表于2019-5-21 23:56

丨

只看该作者

丨

取消关注该作者的回复

沙发

学习了:

: 小由菜数据达人Lv4

发表于2019-7-2 14:51

丨

只看该作者

丨

取消关注该作者的回复

板凳

这个代码改动哪里可以让那个表格不要从第一行开始轮播，能不能固定第一行啊

: tangmq 数据达人Lv4

发表于2019-9-27 13:43

丨

只看该作者

丨

取消关注该作者的回复

地板

/***ABI报表模板滚动脚本
**表格内容自动轮播脚本
**@param tableDom内容滚动的表格，最好是表格的父DIV
**@param visibleHeight 可视区的高度
***/
function autoScrollTable(tableDom, visibleHeight) {
var marqueesHeight = visibleHeight;
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 (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) {
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, 2000);
}
autoScrollTable(document.getElementById('GRID2'),document.getElementById("HHH148").clientHeight);

复制代码

: 就是ZOE 初学数据Lv2

发表于2019-12-19 11:31

丨

只看该作者

丨

取消关注该作者的回复

老师，您好。请问怎么实现固定第一行标题不动，标题以下数据列滚动呢？

: tangmq 数据达人Lv4

发表于2019-12-19 14:30

丨

只看该作者

丨

取消关注该作者的回复

就是ZOE 发表于 2019-12-19 11:31
老师，您好。请问怎么实现固定第一行标题不动，标题以下数据列滚动呢？

标题用过一个表格，数据用一个表格，两个表格位置搞精细一些。拼成一个表格的样子。欧耶

: 13007610673 数据达人Lv4

发表于2020-3-4 13:33

丨

只看该作者

丨

取消关注该作者的回复

老师您好，这个脚本和下面的控制外链式的脚本冲突，请问有什么办法解决么
// 控制外链式显示方式为弹出对话框
function _zun(url) {
debugger;
  var evt = window.lastclickevent;
  window["currentcell"] = $(evt.target).parents("td:first");

  url = encodeURI(url);