反馈已提交

网络繁忙

决策报表新自适应_JS使用

  • 文档创建者:用户3pBiH8835
  • 编辑次数:45次
  • 最近更新:Leo.Tsai 于 2021-06-11
  • 1. 概述

    安装决策报表新自适应插件后,由于新自适应的前端采用新的 Canvas 进行绘制实现,不同于老自适应的渲染方式,决策报表支持的 JS 接口有所变化。

    安装插件后,新自适应前端除了支持之前的一些接口外,又新增了一些接口,本文将列举新自适应支持的 JS 接口。

    若您在使用中,发现所涉及到的决策报表 JS 接口在本文中未覆盖,可下方评论区留言或联系我司技术支持。

    注:新自适应下添加 JS 事件时,获取不到通过动态参数方式传递过来的参数值。

    2. 支持的旧接口

    2.1 获取组件

    获取控件有两种方法,_g().getWidgetByName('Component') 和 this.options.form.getWidgetByName('Component')

    前者能获取到报表中所有地方的组件,后者仅能获取当前容器内的组件。

    如 this.options.form.getWidgetByName 写在参数面板里,就只能获取参数面板里的组件, 写在 body 里,就只能获取body 里的组件。

    所以,推荐使用 _g().getWidgetByName('Component')。

    1)获取当前容器内的组件

    方法this.options.form.getWidgetByName('Component') 获取当前容器内的控件
    Component

    字符串,控件名称

    示例

    this.options.form.getWidgetByName('textEditor0') 参数面板中某个控件添加事件,获取同在参数面板内的文本框 textEditor0

    this.options.form.getWidgetByName('report0') 给 body 内的按钮添加事件获取 body 内的报表块report0

    this.options.form.getWidgetByName('tabpane0') 给 body 内的按钮添加事件获取body 内的 Tab 块 tabpane0

    应用示例

    JS实现参数组合筛选的前进和后退    JS实现隐藏决策报表组件   数据库表字段控制Tab块隐藏

    2)获取到报表中所有地方的控件

    方法_g().getWidgetByName('Component') 获取到报表中所有地方的控件
    Component

    字符串,控件名称

    示例

    _g().getWidgetByName('textEditor0') 获取报表内的文本框 textEditor0,无论其在参数面板内,还是在 body 内

    _g().getWidgetByName('report0') 给参数面板内的按钮添加事件获取 body 中报表块 report0

    _g().getWidgetByName('tabpane0') 给参数面板内的按钮添加事件获取 body 中 Tab 块 tabpane0

    应用示例JS实现在报表参数界面获取控件的值  JS实现决策报表中点击标题排序  JS实现决策报表中Tab块轮播

    2.2 控件

    2.2.1 获取控件

    如何获取控件可参考 2.1 节内容。

    2.2.2 控件方法

    获取控件后,可对控件进行一些设置。对控件可执行的方法如下表,Widget 为获取的控件。

    方法名方法说明
    取实际值Widget.getValue()

    获取控件实际值

    取显示值Widget.getText()获取控件的显示值
    赋实际值Widget.setValue()

    给参数控件赋值,不建议给填报控件赋实际值

    注:使用setValue()给下拉树赋值,需要添加一个 false 参数,即 setValue(value,false)

    赋显示值Widget.setText()

    给参数控件赋显示值

    重置Widget.reset()清空数据
    是否可见Widget.isVisible()返回控件是否可见,返回 true 可见,false 不可见
    设置可见Widget.setVisible(boolean)设置控件是否可见,参数为 true 可见,false 不可见
    设置可用Widget.setEnable(boolean)设置控件是否可用,参数为 true 可用,false 不可用
    是否可用Widget.isEnabled()返回控件是否可用,返回 true 可用,false 不可用
    调用控件事件Widget.fireEvent("事件名称")设置控件触发指定名字的事件
    是否可以为空Widget.options.allowBlank=false 设置控件是否可为空,true 可为空,false 不可为空
    应用示例

    JS实现隐藏决策报表组件    JS实现参数组合筛选的前进和后退  

    JS实现在报表参数界面获取控件的值    JS实现报表组件获取参数面板控件值   

    2.3 报表块和图表块

    2.3.1 获取图表块或报表块

    如何获取图表块和报表块可参考 2.1 节内容。

    2.3.2 方法

    方法名
    方法说明
    设置可见Widget.setVisible(boolean)

    设置控件是否可见,参数为 true 可见,false 不可见

    JS实现隐藏决策报表组件

    2.4 Tab块

    2.4.1 获取 tabpane 块

    如何获取 tabpane 块可参考 2.1 节内容。

    2.4.2 方法

    方法名
    方法说明
    设置可见setTabVisible(Tabarry, boolean)

    Tabarry 为一个数组显示,用来定位具体为哪一个 Tab,

    boolean 设置是否可见,参数为 true 可见,false 不可见

    获得 Tab 的索引getShowIndex() 获得当前展示 Tab 的索引
    展示 TabshowCardByIndex(index)展示定位的 Tab ,index 为 Tab 的索引
    应用示例

    JS实现点击超链切换Tab块 数据库表字段控制Tab块隐

    JS实现决策报表中Tab块轮播 JS 实现点击查询后停留在当前查询的Tab页

    2.5 刷新

    方法名
    方法说明
    跳转到指定页(可以用于刷新当前报表块)gotoPage( pn, para, noCache ) 

    pn : Number 要跳转的页,从1开始

    para : JSON 跳转页面是携带的参数

    noCache : Boolean 不是用缓存,强制取新的数据

    JS实现决策报表中点击标题排序

    提交参数并加载报表内容_g().parameterCommit()

    提交参数并加载报表主体内容

    决策报表自动查询JS

    2.6 其他

    以下 JavaScript 语法相关的内容,可结合帆软提供的接口用在报表开发中。

    应用应用说明
    setInterval('location.reload();',time)

    setInterval() 方法可按照指定的周期(time,以毫秒计)来调用函数或计算表达式。

    location.reload(forceGet) 重新载入当前文档 

    setInterval('location.reload();',time) 定时刷新,即每time毫秒刷新一次

    JS实现决策报表定时刷新

    window.location

    用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面。

    JS实现点击跳转页面和定时跳转页面

    encodeURI(url)

    encodeURI 函数可把字符串进行 URL 编码,url 为含有 URI 或其他要编码的文

    JS实现点击跳转页面和定时跳转页面

    window.parent

    parent 属性返回当前窗口的父窗口

    JS实现决策报表中网页框相互刷新

    location.href 

    href 属性是一个可读可写的字符串,可设置或返回当前显示的文档的完整 URL

    JS实现暂停和继续轮播报表

    3. 新增接口

    利用_g().getWidgetByName('report1')获取到报表块后,即可对报表块内容做设置,如下为新增的控件方法。

    3.1 单元格颜色变化

    方法makeHeightCell(color, mouseset)鼠标移动时单元格颜色变化
    参数1color

    color: string 类型,颜色

    参数2mouseset

    鼠标的操作

    • mouseover 鼠标悬浮

    • mousedown 鼠标点击

    • 缺省,鼠标悬浮加点击

    示例鼠标悬浮时显示红色:_g().getWidgetByName('report1').makeHeightCell('red', 'mouseover')
    应用示例

    (新)JS实现决策报表报表块鼠标所在单元格或行的样式.fr

    3.2 单元格所在行颜色变化

    方法makeHeightLine(color, mouseset)鼠标移动时单元格所在行颜色发生变化
    参数1color

    color: string 类型,颜色

    参数2mouseset

    鼠标的操作

    • mouseover 鼠标悬浮

    • mousedown 鼠标点击

    • 缺省,鼠标悬浮加点击

    示例鼠标悬浮时该行显示红色:_g().getWidgetByName('report1').makeHeightLine('red', 'mouseover')
    应用示例

    (新)JS实现决策报表报表块鼠标所在单元格或行的样式.frm

    3.3 单元格颜色是否变化

    方法makeHeightCellHold(color, change)鼠标移动时单元格颜色是否保持不变
    数1color

    color: string 类型,颜色

    参数2change

    change:bool类型,true 为保持不变

    示例颜色保持红色不变:_g().getWidgetByName("report0").makeHeightCellHold('red', true);
    应用示例

    (新)JS实现决策报表报表块鼠标所在单元格或行的样式.frm

    3.4 单元格所在行颜色是否变化

    方法makeHeightLineHold(color, change)鼠标移动时单元格所在行颜色是否保持不变
    数1color

    color: string 类型,颜色

    参数2change

    change:bool类型,true 为保持不变

    示例颜色保持红色不变:_g().getWidgetByName("report0").makeHeightLineHold('red', true);
    应用示例

    (新)JS实现决策报表报表块鼠标所在单元格或行的样式.frm

    (新)表单中tab块点击行变色.frm

    3.5 改变单元格所在行字体样式

    方法makeFontLine(pattern,mouseset)鼠标移动时改变单元格所在行字体样式
    参数1pattern

    pattern:json格式,字体样式

    支持的参数为:

    bold:boolean //加粗

    italic:boolean //斜体

    fontFamily:string //字体

    strikeThrough:boolean //删除线

    fontSize:number //字号

    subscript:boolean //下标

    underLine{

    width:number;

    style:string;

    color:number;

    } //下划线

    textShadow:boolean //文字阴影

    supscript:boolean//上标

    color:string //颜色

    参数2mouseset

    鼠标的操作

    • mouseover 鼠标悬浮

    • mousedown 鼠标点击

    • 缺省,鼠标悬浮加点击

    示例

    鼠标悬浮时设置单元格点的字体格式为红色、25号、加粗、阴影:

    g().getWidgetByName('report0').makeFontLine(

    {color: 'red',
    fontSize: 25,
    bold:true,
    textShadow:true
    },'mouseover');
    应用示例

    (新)JS实现决策报表报表块鼠标所在单元格或行的样式.fr

    3.6 改变单元格字体样式

    方法makeFontCell(pattern,mouseover)鼠标移动时改变单元格字体样式
    参数1pattern

    pattern:json格式,字体样式

    支持的参数为:

    bold:boolean //加粗

    italic:boolean //斜体

    fontFamily:string //字体

    strikeThrough:boolean //删除线

    fontSize:number //字号

    subscript:boolean //下标

    underLine{

    width:number;

    style:string;

    color:number;

    } //下划线

    textShadow:boolean //文字阴影

    supscript:boolean//上标

    color:string //颜色

    参数2mouseset

    鼠标的操作

    • mouseover 鼠标悬浮

    • mousedown 鼠标点击

    • 缺省,鼠标悬浮加点击

    示例

    鼠标悬浮时设置单元格字体格式为红色、25号、加粗、阴影:

    g().getWidgetByName('report0').makeFontCell(

    {color: 'red',
    fontSize: 25,
    bold:true,
    textShadow:true
    },'mouseover');
    应用示例

    (新)JS实现决策报表报表块鼠标所在单元格或行的样式.frm

    3.7 报表块跑马灯

    方法startMarquee(opt)报表块实现跑马灯效果
    参数

    opt 

    opt:json格式, 滚动属性

    支持的参数为:

    offset:每次滚动的距离,默认为5

    interval:时间间隔(单位为秒),默认为0.1

    stopOnHover:鼠标悬浮时暂停,默认为true

    to参数:报表块滚动方向

    • top 向上滚动

    • bottom 向下滚动

    • left  向左滚动

    • right 向右滚动

    示例

    报表块 report0 实现每次滚动间距为 2、滚动速度为 0.02 、向右滚动的跑马灯

    _g().getWidgetByName('report0').startMarquee(

    { offset: 2, interval: 0.02, to: 'right' }

    )

    应用示例

    (新)报表块实现跑马灯效果.frm   (新)鼠标悬停实现多个报表块跑马灯停止滚动.frm

    注:如果按照方案未实现跑马灯效果,可能是数据量未超过报表块高度导致的,可以将报表块高度调小。

    3.8 隐藏报表块滚动条

    方法setVScrollBarVisible(visible)隐藏当前报表块的滚动条
    参数visible

    visible:bool类型,false 隐藏

    示例隐藏 report0 报表块的滚动条:_g().getWidgetByName('report0').setVScrollBarVisible(bool)
    应用示例

    (新)JS实现报表块隐藏滚动条.frm

    注:如果按照方案未实现跑马灯效果,可能是数据量未超过报表块高度导致的,可以将报表块高度调小。

    3.9 获取报表块当前页码数

    方法getPageIndex()获取当前报表块当前页码数
    示例获取 report0 报表块当前的页码:_g().getWidgetByName("report0").getPageIndex()
    应用示例

    (新)JS实现报表按钮获取报表块的页码数.frm

    3.10 获取报表块总页码数

    方法getTotalPage()获取当前报表块总页码数
    示例

    获取 report0 报表块当前的页码:_g().getWidgetByName("report0").getTotalPage()

    应用示例

    (新)JS实现报表按钮获取报表块的页码数.frm

    3.11 隐藏 Tab 块的标题

    方法invisible()隐藏 Tab 块 的标题
    示例

    隐藏 所有 Tab 块的标题 :g().getWidgetByName('tabpane0').invisible()

    应用示例

    (新)JS实现隐藏全部tab块标题-示例一.frm

    3.12 隐藏参数面板

    方法

    _g().parameterEl.resizableContainer.doClick()

    隐藏参数面板
    示例

    隐藏参数面板 :_g().parameterEl.resizableContainer.doClick()

    应用示例

    (新)JS隐藏参数面板.frm

    3.13 获取视图树叶子节点

    方法

    getSelectedValue()

    获取视图树叶子节点
    示例

    获取视图树叶子节点:_g().getWidgetByName('treeEditor0').getSelectedValue()

    应用示例

    (新)getSelectedValue获取视图树叶子节点值.fr

    3.14 鼠标悬浮显示提示框

    方法

    makeHoverTooltip(cell, text)

    鼠标在单元格上悬浮时,显示提示内容
    参数1cell:字符串,单元格
    参数2text:字符串,悬浮要显示的文本
    示例

    鼠标悬浮在A1单元格时,显示销量字样:_g().getWidgetByName("report0").makeHoverTooltip('A1', '销量')

    应用示例

    (新)鼠标悬浮提示框.frm

    3.15 跳转到指定组件位置

    方法

    element[0].scrollIntoView()

    跳转到指定组件位置
    示例点击跳转到 Chart1图表位置:_g().getWidgetByName("Chart1").element[0].scrollIntoView()
    应用示例

    (新)点击按钮跳转到指定组件位置.frm

    3.16 获取单元格值

    方法getCellValue(cell)获取单元格的值
    参数1cell

    cell: string 类型,单元格

    示例获取A1单元格的值:_g().getWidgetByName('report1').getCellValue('A1')
    应用示例

    (新)JS获取和设置报表块单元格的值.frm

    3.17 给单元格赋值

    方法setCellValue(cell, text)设置单元格的值
    参数1cell

    cell: string 类型,单元格

    参数2texttext:string 类型,给单元格赋的值
    示例给 A1 单元格赋值alan:_g().getWidgetByName('report0').setCellValue('A1', 'alan')
    应用示例

    (新)JS获取和设置报表块单元格的值.frm

    3.18 隐藏某个 Tab 块

    方法setTabVisible("Tabname", visible)

     设置Tab是可见

    参数1TabnameTabname:string,Tab 名称
    参数2visiblevisible:boolean,是否显示,true 可见,false 不可见
    示例设置 Tab1 不显示_g().getWidgetByName("tablayout0").setTabVisible("tab1", false)
    应用示例

    (新)JS实现隐藏部分tab块标题-示例二.frm

    3.19 点击跳转超链接

    方法changeParameter(Parameter)点击跳转超链接
    参数Parameterjson 格式,报表参数
    示例点击实现超链接:_g().getWidgetByName('chart0').changeParameter({"area": area})

    3.20 视图树赋值时自动展开有值节点

    方法enableAutoExpand()视图树赋值时自动展开有值节点
    示例点击实现超链接:this.enableAutoExpand()
    应用示例

    (新)视图树异步加载赋值全选.frm

    3.21 获取控件

    方法 _g().parameterEl.getWidgetByName('comboCheckBox')获取控件
    参数comboCheckBoxcomboCheckBox:控件名
    示例获取控件comboCheckBox0:_g().parameterEl.getWidgetByName('comboCheckBox0')
    应用示例

    (新)JS实现日历组件增加翻页功能.frm

    4. 示例

    4.1 JS 隐藏决策报表块组件

    报表中,通过点击按钮控件,实现隐藏和显示报表块或者图表块,详细内容可参考:JS实现隐藏决策报表组件

    4.2 JS 实现改变控件透明度

    报表中控件颜色和报表背景不一致时,可以设置控件的透明度,使控件能够融入背景。详细内容可参考:JS实现改变控件透明度

    4.3 JS 实现鼠标滑过时报表块单元格/行样式改变

    决策报表中,当鼠标滑过报表块单元格时,可以显示不同的样式,如鼠标滑过时单元格字体变红。新自适应提供了鼠标滑动时单元格样式变化的接口,可参考 3.1-3.4 节接口内容,给报表块添加「初始化后」事件实现。

    点击下载示例:(新)JS实现决策报表报表块鼠标所在单元格或行的样式.frm

    4.4 JS 隐藏报表块滚动条

    当报表块内容过多时,会出现滚动条,如何隐藏不美观的滚动条,且可以通过鼠标滚轮上下滚动内容呢?

    新自适应提供了全新的隐藏滚动条的接口,可参考 3.7 节接口内容,为报表块添加「初始化后」事件实现。

    点击下载示例:(新)JS实现报表块隐藏滚动条.frm

    4.5 JS 实现决策报表中滚屏/跑马灯效果

    报表页面上放置很多图表时,由于内容过多,超出了浏览器窗口的大小导致内容展示不全,这时可以使用滚屏或跑马灯来实现内容全部展示。

    新自适应提供了全新的跑马灯接口,可参考 3.6 节接口内容,为报表块添加「初始化后」事件实现。

    点击下载示例:(新)报表块实现跑马灯效果.frm   (新)鼠标悬停实现多个报表块跑马灯停止滚动.frm

    4.6 JS 实现决策报表中点击标题排序

    点击某一列标题改变排序多列动态排序 文档中实现了报表动态排序,即根据参数值的不同来决定报表按某列升序还是降序排列,也可以利用 JS 来实现此效果。详细内容可参考:JS实现决策报表中点击标题排序

    4.7 自动轮播数据点提示时联动其他图表

    地图自动播放数据点提示时,可以联动其他图表。详细内容可参考:自动轮播数据点提示时联动其他图表

    4.8 JS 实现点击跳转页面和定时跳转页面

    报表制作中,点击一个报表块时跳转到另一个报表,甚至携带参数的跳转,如何实现呢?详细内容可参考:JS实现点击跳转页面和定时跳转页面

    4.9 JS 实现决策报表中网页框相互刷新

    决策报表中添加两个网页框后,对其中一个网页框中的报表操作,可以刷新另一个网页框中的报表,比如点击A网页框报表中的按钮,可以刷新B网页框中报表。详细内容可参考:JS实现决策报表中网页框相互刷新

    注:示例  2.1 节中,如下代码不适用于新自适应。

    var parent = window.parent;
    var iframe = parent.document.getElementById('RHIFRAME1');//RHIFRAME1是决策报表中需要刷新的网页框名称的大写
    iframe.contentWindow.location.reload(true);

    4.10 JS 实现决策报表定时刷新

    用决策报表做的大屏或板,展示时需要定时刷新的效果。该如何实现呢?详细内容可参考:JS实现决策报表定时刷新

    4.11 JS 实现暂停和继续轮播报表

    在大屏上展示报表时,有时会让多张大屏报表轮播,在特定的情况下停止轮播。如两张报表轮播,当鼠标移入报表时,停止轮播。详细内容可参考:JS实现暂停和继续轮播报表

    4.12 JS 实现点击报表全屏显示

    鼠标点击决策报表主体,报表全屏显示;再点击,恢复为原来的样子,和键盘按 F11 让报表达到全屏的效果一致。详细内容可参考:JS实现点击报表实现全屏效果

    4.13 JS 实现鼠标点击单元格背景色改变

    在报表块中,点击单元格背景色发生变化,再次点击单元格背景色恢复。新自适应提供了鼠标点击时单元格样式变化的接口,可参考 3.7 节接口内容,为报表块添加「初始化后」事件实现。

    点击下载示例:(新)报表块中点击单元格改变单元格(行)颜色再次点击恢复颜色.frm

    4.14 JS 实现点击查询后停留在当前查询的 Tab 页

    决策报表中多 Tab 时,点击查询后,不自动跳转到第一个 Tab 页,还是在用户当前选定 Tab 页。详细内容可参考:JS 实现点击查询后停留在当前查询的 Tab 页

    4.15 JS 实现报表按钮获取报表块的页码

    决策报表中添加报表块,报表块内容分页时,如何获取到报表块中的页码数呢。新自适应提供了获取报表块当前页码的接口,可参考 3.8 节接口内容,通过添加事件实现。如为按钮控件添加「点击」事件,从而实现点击按钮获取报表块当前页码。

    点击下载示例:(新)JS实现报表按钮获取报表块的页码数.frm

    4.16 JS 实现点击超链切换 Tab 块

    用户通过点击报表块单元格的超级链接,实现 Tab 块的切换。给单元格添加「超级链接>JavaScript 脚本」实现。

    点击下载示例:(新)JS实现点击超链切换TAB页.frm

    4.17 JS实现倒计时特效

    地产、零售、电子商务等大屏制作时,经常会有倒计时的需求,例如:营销作战倒计时,零售促销倒计时等,要如何实现呢?详细内容可参考:JS实现倒计时特效

    4.18 JS实现隐藏 Tab 块标题

    自定义设置 Tab 块的展现与隐藏,如设计界面有 3 个 Tab 块,预览时隐藏一个 Tab块 ,只展示 2 个 Tab块,该如何实现呢?可以通过给 tabpane 块添加「初始化后」事件实现。

    点击下载示例:(新)JS实现隐藏全部tab块标题-示例一.frm (新)JS实现隐藏部分tab块标题-示例二.frm

    4.19 JS 实现报表按钮控件取到其他控件值

    在使用决策报表的过程中,可能会遇到添加一个按钮,然后需要这个按钮取到其他的值,该如何实现呢?通过给按钮控件添加「点击」事件实现。

    点击可下载示例:(新)JS获取和设置报表块单元格的值.frm

    4.20 JS 实现获取参数面板控件值

    在设计决策报表时,需要通过决策报表主体的按钮控件或者报表块的超链接获取参数面板的控件值,该如何实现呢?详细内容可参考:JS实现获取参数面板控件值

    4.21 JS 实现决策报表中 Tab 块轮播

    对于多 Tab 的决策报表,实现固定时间间隔内自动循环跳转,可以使用 Tab 轮播功能,也可以通过添加 JS 实现。详细内容可参考:JS实现决策报表中Tab块轮播

    4.22 JS 隐藏正在加载图标与文字

    决策报表定时刷新时、我们可以通过添加 JS 来实现刷新效果。刷新过程中,不显示加载图标,要如何实现呢?通过给 body 添加「初始化后」事件实现。详细内容可参考:JS隐藏正在加载图标与文字

    4.23 JS 实现报表块数据变化后刷新联动的图表块

    决策报表中同时具有报表块和图表块时,图表块数据来源于报表块,如果想要实现报表块数据发生变化后,联动的图表块也会自动刷新,要怎么做呢?给图表块添加 JS,使用 c.dataRefresh() 图表刷新接口,实现报表块数据改变后刷新图表。详细内容可参考:JS实现报表块数据变化后刷新联动的图表块

    4.24 JS 实现切换 Tab 后显示/隐藏参数面板上的控件

    决策报表中具有多个 Tab 和参数面板时,当需要切换至某个 Tab 块时,参数面板中的部分参数要隐藏,该如何实现呢?可以通过给 tabpane 块添加「Tab切换事件」实现。

    点击下载模板:(新)JS实现切换tab显示或隐藏参数面板上的控件.frm

    4.25 JS 实现决策报表参数界面自动查询

    决策报表中添加参数面板后,实现控件选择或编辑值后不点击按钮直接查询数据,呈现报表。详细内容可参考:JS实现决策报表参数界面自动查询

    4.26 JS 实现在参数界面获取控件的值

    使用决策报表的时候,有时会用到在决策报表参数面板获取报表控件的值,那么该如何实现呢?详细内容可参考:JS实现在报表参数界面获取控件的值

    4.27 JS 实现点击按钮实现超链接功能

    在决策报表中,通过点击按钮给报表中报表块或图表块传递参数,类似于在普通报表单元格中添加「超链接>动态参数」实现的效果。详细内容可参考:JS 实现点击按钮实现超链接功能

    4.28 日历组件增加翻页功能

    帆软商城中的日历组件只能显示当前月的日期,实际应用中需要有一个翻页的效果,来实现自由选择日期。详细内容可参考:日历组件增加翻页功能

    4.29 JS 实现控件融入背景

    决策报表深色背景下,控件原本的白色显得很刺眼,如何将控件背景修改成与主体背景颜色一致呢,效果如下图所示:

    1)新建模板,添加控件,设计好背景。

    2)新建 CSS 文件 style1.css,放置在报表工程 %FR_HOME%\webapps\webroot\help\css 下。

    点击下载 style1.css 文件:style1.css

    3)引用 CSS 文件,为 body 添加「初始化后」事件,事件内容为:

    $('<link rel="stylesheet" type="text/css" href="/webroot/help/css/style1.css"/>').appendTo('head');

    4)保存模板,点击预览。

    点击下载模板:(新)控件融入背景.frm

    5)如上示例为控件和弹窗设置的背景不统一,若控件和弹窗背景需要设置统一,CSS 文件为:custom.css

    点击下载模板:(新)控件融入背景(控件和弹窗一起).frm

    4.30 决策报表按钮查询最近日期的数据

    决策报表查询指定区间日期数据时,希望可以通过点击按钮( 不在参数面板 )查询到最近的数据,例如:近7天、近14天等等。详细内容可参考:决策报表按钮查询最近日期的数据

    4.31 决策报表控件实现点击查询按钮后才能查询

    决策报表 body 中添加一个按钮控件,设置成查询按钮,点击后才能触发查询。详细内容可参考:决策报表按钮查询最近日期的数据

    注:新自适应,参考文档内容添加事件时,需要将事件类型改成「编辑结束」事件。

    点击下载模板:(新)决策报表控件实现点击查询按钮后才能查询.frm

    4.32 JS 实现大屏旋转星空背景

    大屏场景下给决策报表添加一个酷炫的旋转星空效果,效果可参考:JS实现大屏旋转星空背景。新自适应需要修改 JS 代码,代码内容为:

    function background() {
    $(".content-container").append('<canvas id="canvas"></canvas>');
    //在body中插入canvas画布,并置于底层
    var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d'),
    w = canvas.width = window.innerWidth,
    h = canvas.height = window.innerHeight,
    hue = 217,
    stars = [],
    count = 0,
    maxStars = 1000;
    //设置星星数量
    var canvas2 = document.createElement('canvas'),
    ctx2 = canvas2.getContext('2d');
    canvas2.width = 100;
    canvas2.height = 100;
    var half = canvas2.width / 2,
            gradient2 = ctx2.createRadialGradient(half, half, 0, half, half, half);
    gradient2.addColorStop(0.025, '#fff');
    gradient2.addColorStop(0.1, 'hsl(' + hue + ', 61%, 33%)');
    gradient2.addColorStop(0.25, 'hsl(' + hue + ', 64%, 6%)');
    gradient2.addColorStop(1, 'transparent');
    ctx2.fillStyle = gradient2;
    ctx2.beginPath();
    ctx2.arc(half, half, half, 0, Math.PI * 2);
    ctx2.fill();

    function random(min, max) {
    if (arguments.length < 2) {
    max = min;
    min = 0;
    }
    if (min > max) {
    var hold = max;
    max = min;
    min = hold;
    }
    return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    var Star = function() {
    this.orbitRadius = random(w / 2 - 50);
    this.radius = random(100, this.orbitRadius) / 10;
    this.orbitX = w / 2;
    this.orbitY = h / 2;
    this.timePassed = random(0, maxStars);
    this.speed = random(this.orbitRadius) / 200000;
    //设置旋转速度
    this.alpha = random(2, 10) / 10;
    count++;
    stars[count] = this;
    }

    Star.prototype.draw = function() {
    var x = Math.sin(this.timePassed + 1) * this.orbitRadius + this.orbitX,
    y = Math.cos(this.timePassed) * this.orbitRadius / 2 + this.orbitY,
    twinkle = random(10);
    if (twinkle === 1 && this.alpha > 0) {
    this.alpha -= 0.05;
    } else if (twinkle === 2 && this.alpha < 1) {
    this.alpha += 0.05;
    }
    ctx.globalAlpha = this.alpha;
    ctx.drawImage(canvas2, x - this.radius / 2, y - this.radius / 2, this.radius, this.radius);
    this.timePassed += this.speed;
    }
    for (var i = 0; i < maxStars; i++) {
    new Star();
    }

    function animation() {
    ctx.globalCompositeOperation = 'source-over';
    ctx.globalAlpha = 0.8;
    ctx.fillStyle = 'hsla(' + hue + ', 64%, 6%, 1)';
    ctx.fillRect(0, 0, w, h)
    ctx.globalCompositeOperation = 'lighter';
    for (var i = 1, l = stars.length; i < l; i++) {
    stars[i].draw();
    };
    window.requestAnimationFrame(animation);
    }
    animation();
    }
    background();
    $(window).resize(function() {
    background();
    })

    点击可下载模板:大屏旋转星空背景图.frm

    4.33 JS实现参数面板自动隐藏与显示

    报表自带的参数面板默认是显示的,如果想隐藏,需要点击参数面板下面的小三角图标,如何实现在初始化时自动隐藏参数面板,鼠标移动在参数面板上时恢复参数面板。

    可参考 3.11 节 接口,给参数面板添加「初始化后」事件实现。

    点击下载模板:(新)JS隐藏参数面板.frm

    4.34 JS 实现清空控件内容

    在使用查询控件时,有时希望能够快捷重置控件的内容,或者重置所有控件的内容,效果如:JS实现清空控件内容 所示。

    决策报表中按钮控件「点击」事件内容如下:

    $.each(this.options.form.name_widgets, function(i, item) {
    if(item.options.xtype !== 'label')

    { item.setValue(""); //item.setText(""); //item.reset(); }

    });

    /*
    //移动端
    this.options.form.getWidgetByName("categoryID").reset(); //重置产品类别
    this.options.form.getWidgetByName("supplierID").reset(); //重置供应商
    this.options.form.getWidgetByName("pay").reset(); //重置订单支付状态
    this.options.form.getWidgetByName("start").reset(); //重置起始日期
    this.options.form.getWidgetByName("end").reset(); //重置结束日期
    */

    点击下载模板:(新)JS清空(重置)条件-示例二.frm

    4.35 CSS 修改决策报表弹出框样式

    报表开发时,非白色背景的弹出窗口中存在超链接,点击链接到其他报表时,会出现短暂的加载空白,如下图所示,若想去除这个闪烁的空白,该如何实现呢?

    2021-05-06_16-21-00.gif

    引用自定义的 CSS 样式实现对弹出框整体样式进行修改。

    1)新建模板,模板设置了蓝色背景,并添加超链接跳转到另一张报表,链接打开方式为当前窗口。

    2)新建 CSS 文件 dialogcss.css,将该文件放置于%FR_HOME%\webapps\webroot\help\css\路径下。

    点击下载 CSS 文件:dialogcss.css

    3)给 body 添加「初始化事件」,引入dialogcss.css 文件。事件内容为:

    var link='<link rel="stylesheet" type="text/css" href="../../help/css/dialogcss.css">';
    $("head").append(link);

    4)保存预览。

    点击下载模板:(新)决策报表弹出框整体样式修改_主表.frm

    (新)决策报表弹出框整体样式修改_子表1.frm  (新)决策报表弹出框整体样式修改_子表2.frm

    4.36 JS 实现决策报表内报表块局部刷新/翻页

    刷新报表里的报表块,报表里的报表块实现跳转到指定页,可通过给报表块添加 JS 事件实现,详细内容可参考:JS实现决策报表内报表块局部刷新/翻页

    4.37 JS 实现根据日周月切换日期控件查询格式

    FineReport 中日期控件只能以「年月日」这样的顺序来选择某一个具体日期。可以通过 JS 代码实现切换日期控件的查询方式进而快速查询。如下图所示:

    1)新建模板,添加三个按钮控件,四个日期控件,一个标签控件,一个查询按钮控件。

    2)控件设置默认值,详细内容见模板。

    3)给日报、周报、月报和查询按钮分别添加点击事件,事件内容见模板。

    4)设置报表样式,保存后预览效果。

    点击下载模板:(新)JS实现根据日周月切换日期控件查询格式.frm

    4.38 JS 实现动态隐藏参数以及控制参数面板高度

    当参数面板中参数控件较多时,可以对一些不常用、不需要展现出来的的控件进行隐藏,当需要展示的时候再使其展示出来。详细内容可参考:JS 实现动态隐藏参数以及控制参数面板高度

    4.39  JS 实现自定义导出文件名称

    FR 虽然有内置的导出按钮,但是导出名称不能自定义,如果想要自定义导出文件名称,那么该如何实现呢?详细内容可参考:JS实现自定义导出文件名称

    4.40 JS 实现参数控件赋值

    参数界面中,通过一个控件给另一个控件赋值。详细内容可参考:JS实现参数控件赋值

    4.41 JS 根据条件控制参数控件是否显示/可用

    参数界面中,部分参数控件在没满足条件时不显示,满足条件后再显示。详细内容可参考:JS根据条件控制参数控件是否显示/可用

    4.42 JS 实现日期控件校验

    参数查询时,可以对控件值做一些简单校验,当需要一些复杂校验时,设计器自带的校验规则就无法满足了。可通过添加 JS实现。详细内容可参考:JS实现日期控件校验

    4.43 自定义导出按钮

    FineReport 支持多种不同的导出方式,但是在 Web 页面集成 中,用户往往只想将报表内容嵌入到 iframe 中,而工具栏以及工具栏上的按钮都会隐藏掉,用户可以通过 Web 页面自定义按钮实现导出。详细内容可参考:自定义导出按钮

    4.44 JS 实现一些炫酷背景

    大屏场景下,可以通过 JS 给报表添加一些炫酷背景。如星空、旋转、网格等,详细可参考以下内容:JS实现粒子漩涡背景

    JS实现粒子穿梭背景JS实现动态波浪背景JS实现粒子上浮背景

    4.45 JS实现一些特殊效果

    决策报表中,可以通过 JS 实现一些特殊的效果,如时钟、旋转木马等。详细内容可参考:JS实现时钟效果利用JS制作旋转木马效果

    附件列表


    主题: 决策报表应用
    • 有帮助
    • 没帮助
    • 只是浏览

    售前咨询电话

    400-811-8890转1

    在线技术支持

    在线QQ:800049425

    热线电话:400-811-8890转2

    总裁办24H投诉

    热线电话:173-1278-1526

    文 档反 馈

    鼠标选中内容,快速反馈问题

    鼠标选中存在疑惑的内容,即可快速反馈问题,我们将会跟进处理。

    不再提示

    10s后关闭