历史版本41 :决策报表JS使用 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 概述编辑

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

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

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

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

2. 支持的旧接口编辑

2.1 控件

2.1.1 获取控件

1）获取参数面板内控件

方法this.options.form.getWidgetByName('Component') 获取参数面板内控件
参数Component

字符串，控件名称

示例this.options.form.getWidgetByName('textEditor0') 获取参数面板内的文本框 textEditor0
应用示例JS实现参数组合筛选的前进和后退

2）获取 body 内控件

方法_g().getWidgetByName('Component') 获取 body 内控件
参数Component

字符串，控件名称

示例_g().getWidgetByName('textEditor0') 获取 body 内的文本框 textEditor0
应用示例JS实现在报表参数界面获取控件的值

2.1.2 控件方法

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

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

获取控件实际值

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

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

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

赋显示值Widget.setText()

给参数控件赋显示值

重置Widget.reset()清空数据
是否可见Widget.isVisible(boolean)返回控件是否可见，返回 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.2 报表块和图表块

2.2.1 获取图表块或报表块

1）加获取事件的控件在 body 内

方法this.options.form.getWidgetByName('Component') 加获取事件的控件在参数面板内
参数Component

字符串，控件名称

示例this.options.form.getWidgetByName('report0') 给参数面板内的按钮添加事件获取报表块report0
应用示例JS实现隐藏决策报表组件

2）加获取事件的控件在参数面板内

方法_g().getWidgetByName('Component') 获取 body 内控件
参数Component

字符串，控件名称

示例_g().getWidgetByName('textEditor0') 获取 body 内的文本框 textEditor0
应用示例JS实现决策报表中点击标题排序

2.2.2 方法

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

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

JS实现隐藏决策报表组件

2.3 Tab块

2.3.1 获取 tabpane 块

1）加获取事件的控件在 body 内

方法this.options.form.getWidgetByName('Component') 加获取事件的控件在参数面板内，tabpane 为整体 Tab 块的名称
参数Component

字符串，控件名称

示例this.options.form.getWidgetByName('report0') 给参数面板内的按钮添加事件获取报表块report0
应用示例JS实现点击超链切换Tab块 数据库表字段控制Tab块隐藏

2）加获取事件的控件在参数面板内

方法_g().getWidgetByName('Component') 加获取事件的控件在 body 内，tabpane 为整体 Tab 块的名称
参数Component

字符串，控件名称

示例_g().getWidgetByName('textEditor0') 获取 body 内的文本框 textEditor0
应用示例JS实现决策报表中Tab块轮播

2.3.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.4 刷新

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

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

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

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

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

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

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

决策报表自动查询JS

2.5 其他

以下 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 改变单元格所在行字体样式

方法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.5 改变单元格字体样式

方法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.6 报表块跑马灯




方法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.7 隐藏报表块滚动条

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

visible：bool类型，false 隐藏

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

（新）JS实现报表块隐藏滚动条.frm

3.8 获取报表块当前页码数

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

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

3.9 获取报表块总页码数

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

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

应用示例

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

3.10 隐藏Tab块tabpane

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

隐藏 tabpane0 ：g().getWidgetByName('tabpane0').invisible()

应用示例

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

3.11 隐藏参数面板

方法

_g().parameterEl.resizableContainer.doClick()

获取当前报表块总页码数
示例

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

应用示例

（新）JS隐藏参数面板.frm

3.12 获取视图树叶子节点

方法

getSelectedValue()

获取视图树叶子节点
示例

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

应用示例

（新）getSelectedValue获取视图树叶子节点值.fr

3.13 鼠标悬浮显示提示框

方法

makeHoverTooltip(cell, text)

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

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

3.14 跳转到指定组件位置

方法

element[0].scrollIntoView()

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

3.15 获取单元格值

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

cell： string 类型，单元格

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

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

3.16 给单元格赋值

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

cell： string 类型，单元格

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

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

3.17 隐藏全部Tab块

方法invisible()隐藏全部Tab块
示例隐藏Tab块：_g().getWidgetByName('tabpane0').invisible()
应用示例

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

3.18 隐藏对单个Tab块

方法setTabVisible("Tabname", fals)

 设置Tab是可见

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

3.19 点击跳转超链接

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

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

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

3.21 获取控件

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