报表块实现跑马灯效果

编辑
文档创建者:axing (73248 )     浏览次数:3142次     编辑次数:9次     最近更新:ukae 于 2018-08-13     

目录:

1. 描述编辑

在设计大屏报表块的时候,有时我们希望实现文字跑马灯效果。现有的文档当中:

1)以html实现跑马灯特效

2)JS实现跑马灯效果

都是以HTML+js的方式实现了单行文本的跑马灯效果,那么如何实现整体报表块的跑马灯效果呢,如下:
222

2. 思路编辑

报表布局设置加上js控制实现。

注:示例是在报表块初始化后通过js实现了隐藏滚动条和跑马灯的效果,如果报表块加载比较慢没有实现效果,可以适当调整延时函数setTimeout的延时时间。

3. 操作步骤编辑

3.1 示例一:标题未冻结的跑马灯效果

1)新建一个决策报表,将body的布局方式设置为绝对布局(自适应布局无效)

222

2)新建一个数据集ds1:SELECT * FROM 销量

3)在决策报表主体拖入一个报表块,报表块设计如下:

222

3)添加报表块初始化后事件

222

js代码如下:

if(window.interval2) { clearInterval(window.interval2); } setTimeout(function() { $("div[widgetname=REPORT0]").find(".reportContent")[0].style.overflow = "hidden"; }, 1000); window.flag = true; setTimeout(function() { $(".reportContent").mouseover(function() { window.flag = false; }) $(".reportContent").mouseleave(function() { window.flag = true; }) var old = -1; window.interval2 = setInterval(function() { if(window.flag) { currentpos = $(".reportContent")[0].scrollTop; if(currentpos == old) { $(".reportContent")[0].scrollTop = 0; } else { old = currentpos; $(".reportContent")[0].scrollTop = currentpos + 1.5; } } }, 25); }, 1000)

4)保存预览,效果如下:

222

备注一:如果有多个报表块需要同时实现跑马灯,将后半部分setInterval()函数中的$(".reportContent")[0]统一修改为$("div[widgetname=REPORT0]").find(".reportContent")[0],把代码中所有的REPORT0修改为报表块对应的控件名称大写格式:

setTimeout(function() { $("div[widgetname=REPORT0_C]").find(".reportContent")[0].style.overflow = "hidden"; }, 1000); window.flag = true; setTimeout(function() { $(".reportContent").mouseover(function() { window.flag = false; }) $(".reportContent").mouseleave(function() { window.flag = true; }) var old = -1; window.interval2 = setInterval(function() { if(window.flag) { currentpos = $("div[widgetname=REPORT0_C]").find(".reportContent")[0].scrollTop; if(currentpos == old) { $("div[widgetname=REPORT0_C]").find(".reportContent")[0].scrollTop = 0; } else { old = currentpos; $("div[widgetname=REPORT0_C]").find(".reportContent")[0].scrollTop = currentpos + 1.5; } } }, 25); }, 1000)

保存预览,效果如下:

222

备注二:如果安装了自定义滚动条插件(1.3.4版本),需要将js代码中的.reportContent替换成.scrollDiv

setTimeout(function() { $("div[widgetname=REPORT0]").find(".scrollDiv")[0].style.overflow = "hidden"; }, 1000); window.flag = true; setTimeout(function() { $(".scrollDiv").mouseover(function() { window.flag = false; }) $(".scrollDiv").mouseleave(function() { window.flag = true; }) var old = -1; window.interval2 = setInterval(function() { if(window.flag) { currentpos = $(".scrollDiv")[0].scrollTop; if(currentpos == old) { $(".scrollDiv")[0].scrollTop = 0; } else { old = currentpos; $(".scrollDiv")[0].scrollTop = currentpos + 1.5; } } }, 25); }, 1000)

3.2 示例二:标题冻结的跑马灯效果

在示例一的基础上修改报表。

1)编辑报表块,选中第一行,将鼠标放在行表头上,点击右键,点击设置重复标题行

222

2)在报表块的工具栏中,点击冻结,打开重复与冻结设置窗口,勾选冻结第1行至第1行

222

3)将报表块初始化后事件的js代码修改为下面的代码:

setTimeout(function() { //隐藏报表块report0的滚动条(此报表块名为report0,根据具体情况修改) $("div[widgetname=REPORT0]").find(".frozen-north")[0].style.overflow = "hidden"; $("div[widgetname=REPORT0]").find(".frozen-center")[0].style.overflow = "hidden"; }, 1000); window.flag = true; //鼠标悬停,滚动停止 setTimeout(function() { $(".frozen-center").mouseover(function() { window.flag = false; }); //鼠标离开,继续滚动 $(".frozen-center").mouseleave(function() { window.flag = true; }); var old = -1; var interval = setInterval(function() { if(window.flag) { currentpos = $(".frozen-center")[0].scrollTop; if(currentpos == old) { $(".frozen-center")[0].scrollTop = 0; } else { old = currentpos; //以25ms的速度每次滚动1.5PX $(".frozen-center")[0].scrollTop = currentpos + 1.5; } } }, 25); }, 1000);
直接替换即可。如下图所示:
222
4)保存预览,效果如下:
222
备注一:如果有多个报表块需要同时实现跑马灯,将后半部分setInterval()函数中的$(".frozen-center")[0]统一修改为$("div[widgetname=REPORT0]").find(".frozen-center")[0],把代码中所有的REPORT0修改为报表块对应的控件名称大写格式:
setTimeout(function() { //隐藏报表块report0_c的滚动条(此报表块名为report0_c,根据具体情况修改) $("div[widgetname=REPORT0_C]").find(".frozen-north")[0].style.overflow = "hidden"; $("div[widgetname=REPORT0_C]").find(".frozen-center")[0].style.overflow = "hidden"; }, 1000); window.flag = true; //鼠标悬停,滚动停止 setTimeout(function() { $(".frozen-center").mouseover(function() { window.flag = false; }); //鼠标离开,继续滚动 $(".frozen-center").mouseleave(function() { window.flag = true; }); var old = -1; var interval = setInterval(function() { if(window.flag) { currentpos = $("div[widgetname=REPORT0_C]").find(".frozen-center")[0].scrollTop; if(currentpos == old) { $("div[widgetname=REPORT0_C]").find(".frozen-center")[0].scrollTop = 0; } else { old = currentpos; //以25ms的速度每次滚动1.5PX $("div[widgetname=REPORT0_C]").find(".frozen-center")[0].scrollTop = currentpos + 1.5; } } }, 25); }, 1000);
保存预览,效果如下:
222

4. 预览效果编辑

4.1 PC端预览效果
1)示例一:标题未冻结的跑马灯效果
222
2)示例二:标题冻结的跑马灯效果
222
4.2 移动端预览效果

注:不支持移动端。

5. 已完成模板编辑

5.1 示例一
1)标题未冻结
模板效果在线查看请点击:报表块实现跑马灯效果-示例一1.frm
已完成的模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表单JS实例\03-报表块实现跑马灯效果-示例一1.frm
2)标题未冻结,多个报表块
模板效果在线查看请点击:报表块实现跑马灯效果-示例一2.frm
已完成的模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表单JS实例\03-报表块实现跑马灯效果-示例一2.frm
3)标题未冻结,安装了“自定义滚动条插件(1.3.4版本)
模板效果在线查看请点击:报表块实现跑马灯效果-示例一3.frm (注:在线服务器未安装插件,所以没效果
已完成的模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表单JS实例\03-报表块实现跑马灯效果-示例一3.frm
5.2 示例二
1)标题冻结
模板效果在线查看请点击:报表块实现跑马灯效果-示例二1.frm
已完成的模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表单JS实例\03-报表块实现跑马灯效果-示例二1.frm

2)标题冻结,多个报表块

模板效果在线查看请点击:报表块实现跑马灯效果-示例二2.frm
已完成的模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表单JS实例\03-报表块实现跑马灯效果-示例二2.frm

附件列表


主题: 二次开发
如果您认为本文档还有待完善,请编辑

文档内容仅供参考,如果你需要获取更多帮助,付费/准付费客户请咨询帆软技术支持
关于技术问题,您还可以前往帆软社区,点击顶部搜索框旁边的提问按钮
若您还有其他非技术类问题,可以联系帆软传说哥(qq:1745114201

此页面有帮助吗?只是浏览 [ 去社区提问 ]