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 不可为空 |
应用示例 |
2.2 报表块和图表块
2.2.1 获取图表块或报表块
1)加获取事件的控件在 body 内
方法 | this.options.form.getWidgetByName('Component') | 加获取事件的控件在参数面板内 |
---|---|---|
参数 | Component | 字符串,控件名称 |
示例 | this.options.form.getWidgetByName('report0') 给 body 内的按钮添加事件获取报表块report0 | |
应用示例 | JS实现隐藏决策报表组件 |
2)加获取事件的控件在参数面板内
方法 | _g().getWidgetByName('Component') | 获取 body 内控件 |
---|---|---|
参数 | Component | 字符串,控件名称 |
示例 | _g().getWidgetByName('report0') 给参数面板内的按钮添加事件获取报表块report0 | |
应用示例 | JS实现决策报表中点击标题排序 |
2.2.2 方法
方法名 | 方法 | 说明 |
---|---|---|
设置可见 | Widget.setVisible(boolean) | 设置控件是否可见,参数为 true 可见,false 不可见 |
2.3 Tab块
2.3.1 获取 tabpane 块
1)加获取事件的控件在 body 内
注:body 内报表块中使用超链添加 JS 获取 tabpane 块时使用 _g().getWidgetByName('Component') 的方法。
方法 | this.options.form.getWidgetByName('Component') | 加获取事件的控件在参数面板内,tabpane 为整体 Tab 块的名称 |
---|---|---|
参数 | Component | 字符串,控件名称 |
示例 | this.options.form.getWidgetByName('tabpane0') 给 body 内的按钮添加事件获取 Tab 块 tabpane0 | |
应用示例 | 数据库表字段控制Tab块隐藏 |
2)加获取事件的控件在参数面板内
方法 | _g().getWidgetByName('Component') | 加获取事件的控件在 body 内,tabpane 为整体 Tab 块的名称 |
---|---|---|
参数 | Component | 字符串,控件名称 |
示例 | _g().getWidgetByName('tabpane0') 给参数面板内的按钮添加事件获取 Tab 块 tabpane0 | |
应用示例 | JS实现决策报表中Tab块轮播 |
2.3.2 方法
方法名 | 方法 | 说明 |
---|---|---|
设置可见 | setTabVisible(Tabarry, boolean) | Tabarry 为一个数组显示,用来定位具体为哪一个 Tab, boolean 设置是否可见,参数为 true 可见,false 不可见 |
获得 Tab 的索引 | getShowIndex() | 获得当前展示 Tab 的索引 |
展示 Tab | showCardByIndex(index) | 展示定位的 Tab ,index 为 Tab 的索引 |
应用示例 |
2.4 刷新
方法名 | 方法 | 说明 |
---|---|---|
跳转到指定页(可以用于刷新当前报表块) | gotoPage( pn, para, noCache ) | pn : Number 要跳转的页,从1开始 para : JSON 跳转页面是携带的参数 noCache : Boolean 不是用缓存,强制取新的数据 |
提交参数并加载报表内容 | _g().parameterCommit() | 提交参数并加载报表主体内容 |
2.5 其他
以下 JavaScript 语法相关的内容,可结合帆软提供的接口用在报表开发中。
应用 | 应用说明 |
---|---|
setInterval('location.reload();',time) | setInterval() 方法可按照指定的周期(time,以毫秒计)来调用函数或计算表达式。 location.reload(forceGet) 重新载入当前文档 setInterval('location.reload();',time) 定时刷新,即每time毫秒刷新一次 |
window.location | 用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面。 |
encodeURI(url) | encodeURI 函数可把字符串进行 URL 编码,url 为含有 URI 或其他要编码的文 本 |
window.parent | parent 属性返回当前窗口的父窗口 |
location.href | href 属性是一个可读可写的字符串,可设置或返回当前显示的文档的完整 URL |
3. 新增接口编辑
利用_g().getWidgetByName('report1')获取到报表块后,即可对报表块内容做设置,如下为新增的控件方法。
3.1 单元格颜色变化
方法 | makeHeightCell(color, mouseset) | 鼠标移动时单元格颜色变化 |
---|---|---|
参数1 | color | color: string 类型,颜色 |
参数2 | mouseset | 鼠标的操作
|
示例 | 鼠标悬浮时显示红色:_g().getWidgetByName('report1').makeHeightCell('red', 'mouseover') | |
应用示例 |
3.2 单元格所在行颜色变化
方法 | makeHeightLine(color, mouseset) | 鼠标移动时单元格所在行颜色发生变化 |
---|---|---|
参数1 | color | color: string 类型,颜色 |
参数2 | mouseset | 鼠标的操作
|
示例 | 鼠标悬浮时该行显示红色:_g().getWidgetByName('report1').makeHeightLine('red', 'mouseover') | |
应用示例 |
3.3 单元格所在行颜色是否变化
方法 | makeHeightCellHold(color, change) | 鼠标移动时单元格所在行颜色是否保持不变 |
---|---|---|
参数1 | color | color: string 类型,颜色 |
参数2 | change | change:bool类型,true 为保持不变 |
示例 | 颜色保持红色不变:_g().getWidgetByName("report0").makeHeightCellHold('red', true); | |
应用示例 |
3.4 改变单元格所在行字体样式
方法 | makeFontLine(pattern,mouseset) | 鼠标移动时改变单元格所在行字体样式 |
---|---|---|
参数1 | pattern | 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 //颜色 |
参数2 | mouseset | 鼠标的操作
|
示例 | 鼠标悬浮时设置单元格点的字体格式为红色、25号、加粗、阴影: g().getWidgetByName('report0').makeFontLine( {color: 'red',fontSize: 25, bold:true, textShadow:true },'mouseover'); | |
应用示例 |
3.5 改变单元格字体样式
方法 | makeFontCell(pattern,mouseover) | 鼠标移动时改变单元格字体样式 |
---|---|---|
参数1 | pattern | 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 //颜色 |
参数2 | mouseset | 鼠标的操作
|
示例 | 鼠标悬浮时设置单元格字体格式为红色、25号、加粗、阴影: g().getWidgetByName('report0').makeFontCell( {color: 'red',fontSize: 25, bold:true, textShadow:true },'mouseover'); | |
应用示例 |
3.6 报表块跑马灯
方法 | startMarquee(opt) | 报表块实现跑马灯效果 |
---|---|---|
参数 | opt | opt:json格式, 滚动属性 支持的参数为: offset:每次滚动的距离,默认为5 interval:时间间隔(单位为秒),默认为0.1 stopOnHover:鼠标悬浮时暂停,默认为true to参数:报表块滚动方向
|
示例 | 报表块 report0 实现每次滚动间距为 2、滚动速度为 0.02 、向右滚动的跑马灯 _g().getWidgetByName('report0').startMarquee( { offset: 2, interval: 0.02, to: 'right' } ) | |
应用示例 |
3.7 隐藏报表块滚动条
方法 | setVScrollBarVisible(visible) | 隐藏当前报表块的滚动条 |
---|---|---|
参数 | visible | visible:bool类型,false 隐藏 |
示例 | 隐藏 report0 报表块的滚动条:_g().getWidgetByName('report0').setVScrollBarVisible(bool) | |
应用示例 |
3.8 获取报表块当前页码数
方法 | getPageIndex() | 获取当前报表块当前页码数 |
---|---|---|
示例 | 获取 report0 报表块当前的页码:_g().getWidgetByName("report0").getPageIndex() | |
应用示例 |
3.9 获取报表块总页码数
方法 | getTotalPage() | 获取当前报表块总页码数 |
---|---|---|
示例 | 获取 report0 报表块当前的页码:_g().getWidgetByName("report0").getTotalPage() | |
应用示例 |
3.10 隐藏Tab块tabpane
方法 | invisible() | 获取当前报表块总页码数 |
---|---|---|
示例 | 隐藏 tabpane0 :g().getWidgetByName('tabpane0').invisible() | |
应用示例 |
3.11 隐藏参数面板
方法 | _g().parameterEl.resizableContainer.doClick() | 获取当前报表块总页码数 |
---|---|---|
示例 | 隐藏参数面板 :_g().parameterEl.resizableContainer.doClick() | |
应用示例 |
3.12 获取视图树叶子节点
方法 | getSelectedValue() | 获取视图树叶子节点 |
---|---|---|
示例 | 获取视图树叶子节点:_g().getWidgetByName('treeEditor0').getSelectedValue() | |
应用示例 |
3.13 鼠标悬浮显示提示框
方法 | makeHoverTooltip(cell, text) | 鼠标在单元格上悬浮时,显示提示内容 |
---|---|---|
参数1 | cell:字符串,单元格 | |
参数2 | text:字符串,悬浮要显示的文本 | |
示例 | 鼠标悬浮在A1单元格时,显示销量字样:_g().getWidgetByName("report0").makeHoverTooltip('A1', '销量'); |
3.14 跳转到指定组件位置
方法 | element[0].scrollIntoView() | 跳转到指定组件位置 |
---|---|---|
示例 | 点击跳转到 Chart1图表位置:_g().getWidgetByName("Chart1").element[0].scrollIntoView() |
3.15 获取单元格值
方法 | getCellValue(cell) | 获取单元格的值 |
---|---|---|
参数1 | cell | cell: string 类型,单元格 |
示例 | 获取A1单元格的值:_g().getWidgetByName('report1').getCellValue('A1') | |
应用示例 |
3.16 给单元格赋值
方法 | setCellValue(cell, text) | 设置单元格的值 |
---|---|---|
参数1 | cell | cell: string 类型,单元格 |
参数2 | text | text:string 类型,给单元格赋的值 |
示例 | 给 A1 单元格赋值alan:_g().getWidgetByName('report0').setCellValue('A1', 'alan') | |
应用示例 |
3.17 隐藏全部Tab块
方法 | invisible() | 隐藏全部Tab块 |
---|---|---|
示例 | 隐藏Tab块:_g().getWidgetByName('tabpane0').invisible() | |
应用示例 |
3.18 隐藏对单个Tab块
方法 | setTabVisible("Tabname", fals) | 设置Tab是可见 |
---|---|---|
参数1 | Tabname | Tabname:string,Tab 名称 |
参数2 | visible | visible:boolean,是否显示,true 可见,false 不可见 |
示例 | 设置 Tab1 不显示_g().getWidgetByName("tablayout0").setTabVisible("tab1", false) |
3.19 点击跳转超链接
方法 | changeParameter(Parameter) | 点击跳转超链接 |
---|---|---|
参数 | Parameter | json 格式,报表参数 |
示例 | 点击实现超链接:_g().getWidgetByName('chart0').changeParameter({"area": area}) |
3.20 视图树赋值时自动展开有值节点
方法 | enableAutoExpand() | 视图树赋值时自动展开有值节点 |
---|---|---|
示例 | 点击实现超链接:this.enableAutoExpand() |
3.21 获取控件
方法 | _g().parameterEl.getWidgetByName('comboCheckBox') | 获取控件 |
---|---|---|
参数 | comboCheckBox | comboCheckBox:控件名 |
示例 | 获取控件comboCheckBox0:_g().parameterEl.getWidgetByName('comboCheckBox0') |