反饋已提交
網絡繁忙
普通报表可以参考 JS实现自动滚屏/跑马灯效果 实现跑马灯效果,决策报表中报表块如何实现下图所示的跑马灯效果呢?
通过给报表块添加「初始化后」 JS 事件实现隐藏滚动条的跑马灯的效果。
新建决策报表,新建数据集 ds1 ,SQL 语句为:SELECT * FROM 销量
1)将报表块report0拖入到 body 组件中,如下图设计报表块的表格。
2)选中报表块report0,点击编辑,冻结第 1 行,如下图所示:
选中报表块report0,添加初始化事件,如下图所示:
JavaScript 代码如下:
setTimeout(function() { //隐藏报表块report0的滚动条(此报表块名为report0,根据具体情况修改) $("div[widgetname=REPORT0]").find(".frozen-north").css({ 'overflow-x':'hidden', 'overflow-y':'hidden' }); $("div[widgetname=REPORT0]").find(".frozen-center").css({ 'overflow-x':'hidden', 'overflow-y':'hidden' }); },1000); window.flag1 = true;var self1 = this;//鼠标悬停,滚动停止setTimeout(function() { $("div[widgetname=REPORT0]").find(".frozen-center").mouseover(function() { window.flag1 = false; }); //鼠标离开,继续滚动 $("div[widgetname=REPORT0]").find(".frozen-center").mouseleave(function() { window.flag1 = true; }); var old = -1; var interval = setInterval(function() { if (!self1.isVisible()) { return; } if (window.flag1) { currentpos1 = $("div[widgetname=REPORT0]").find(".frozen-center")[0].scrollTop; if (currentpos1 == old && 0!=currentpos1) { $("div[widgetname=REPORT0]").find(".frozen-center")[0].scrollTop = 0; } else { old = currentpos1; //以25ms的速度每次滚动1.5PX $("div[widgetname=REPORT0]").find(".frozen-center")[0].scrollTop = currentpos1 + 1.5; } } }, 25);},1000);
实际应用时,用户需要自行修改以下几处:
用户需要根据报表块的名称修改 REPORT0,报表块的名称需要大写
find(".frozen-center")
根据实际情况修改滚动块元素名称 :
.frozen-center:报表块中存在冻结
.reportContent:报表块中无冻结且未安装自定义滚动条插件
.scrollDiv:报表块中无冻结且安装了自定义滚动条插件
模板中存在多个跑马灯报表块时,依次设置为 flag0,flag1,flag2 等
需保证全局变量各不相同,否则无法实现单个暂停
注:如果报表块加载比较慢没有实现效果,可以适当调整延时函数 setTimeout( )的延时时间。
保存报表,点击PC端预览,跑马灯效果如下图所示:
注1:不支持移动端。
注2:不支持报表块定时刷新场景。
注3:如果不安装 自定义滚动条 插件,鼠标移入后不跟随鼠标滚轮移动。
新增一种报表块跑马灯应用场景和设置方法:报表前端展示时,报表块处于隐藏不显示的状态,点击按钮后,报表块可以显示并自动加载跑马灯效果。如下图所示:
1)将报表块report0和按钮控件button0_c拖入到 body 组件中,如下图设计报表块的表格,不勾选控件可见,隐藏报表块。
2)选中报表块组件,点击编辑,冻结第 1 行,如下图所示:
1)选中报表块组件,给报表块添加一个初始化事件,实现跑马灯效果,如下图所示:
JavaScript 如下:
2)选中按钮组件,给按钮添加一个点击事件,点击之后可以显示被隐藏的报表块,如下图所示:
this.options.form.getWidgetByName('REPORT0').setVisible(true)
保存报表,点击PC端预览,效果如下图所示:
已完成的模板请参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表单JS实例\03-报表块实现跑马灯效果.frm
%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表单JS实例\报表块跑马灯扩展应用.frm
点击下载模板:
03-报表块实现跑马灯效果.frm
报表块跑马灯扩展应用.frm
文 檔回 饋
滑鼠選中內容,快速回饋問題
滑鼠選中存在疑惑的內容,即可快速回饋問題,我們將會跟進處理。
不再提示
10s後關閉