1. 概述
决策报表中，使用 JavaScript 对一些功能进行二次开发时，部分接口和普通报表一致，同时也会具有一些决策报表特有的接口，如实现指定隐藏 Tab 块的接口。本文将列举一些决策报表适用的 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 | |
| 应用示例 | ||
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 不可为空 |
| 应用示例 | ||
2.3 报表块和图表块
2.3.1 获取图表块或报表块
如何获取图表块和报表块可参考 2.1 节内容。
2.3.2 方法
| 方法名 | 方法 | 说明 |
|---|---|---|
| 设置可见 | Widget.setVisible(boolean) | 设置控件是否可见，参数为 true 可见，false 不可见 |
2.4 Tab块
2.4.1 获取 tabpane 块
如何获取 tabpane 块可参考 2.1 节内容。
2.4.2 方法
| 方法名 | 方法 | 说明 |
|---|---|---|
| 设置可见 | setTabVisible(Tabarry, boolean) | Tabarry 为一个数组显示，用来定位具体为哪一个 Tab， boolean 设置是否可见，参数为 true 可见，false 不可见 |
| 获得 Tab 的索引 | getShowIndex() | 获得当前展示 Tab 的索引 |
| 展示 Tab | showCardByIndex(index) | 展示定位的 Tab ，index 为 Tab 的索引 |
| 应用示例 | ||
2.5 刷新
| 方法名 | 方法 | 说明 |
|---|---|---|
| 跳转到指定页（可以用于刷新当前报表块） | gotoPage( pn, para, noCache ) | pn : Number 要跳转的页，从1开始 para : JSON 跳转页面是携带的参数 noCache : Boolean 不是用缓存，强制取新的数据 |
| 提交参数并加载报表内容 | _g().parameterCommit() | 提交参数并加载报表主体内容 |
2.6 其他
以下 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. 示例
| 目录 | 文档 | 应用场景 |
|---|---|---|
| Tab 块 | JS实现统一Tab块标题宽度 | 使用 Tab 块时，Tab 标题宽度根据字数自动扩展，若想实现统一宽度，补空格的方式比较麻烦，可以通过添加 JS 统一Tab 块标题宽度。 |
| JS实现隐藏Tab块 | 用户希望可以自定义设置 Tab 的展现与隐藏，比如不同用户可以查看不同的 Tab 块，或者特定场合下隐藏一些 Tab 页。 | |
| JS实现点击超链切换Tab块 | 通过 JS 实现 Tab 块的切换，用户可以自主的选择点击超链或者按钮切换到某个 Tab 块。 | |
| 数据库表字段控制Tab块隐藏 | 通过数据库表中设置的字段值来控制每个 Tab 块是否显示，修改时只需要修改数据库表中的值，不用再改前端。 | |
| JS实现决策报表中Tab块轮播 | 对于多 Tab 块，固定时间间隔内自动循环跳转，鼠标移动不会对其产生干扰 | |
| JS 实现点击查询后停留在当前查询的 Tab 页 | 多 Tab 且需要参数查询时，每次查询后页面自动跳转到第一个 Tab 页，可以通过 JS 实现点击查询后，不自动跳转到第一个 Tab 页，而在当前 Tab 页。 | |
| JS实现切换Tab块时进行数据联动 | 不同 Tab 页关联不同的数据和内容，Tab 轮播切换时，实现报表块中其他内容联动。 | |
| 获取控件 | JS实现在报表参数界面获取控件的值 | 参数界面点击按钮获取 body 画布中控件的实际值。 |
| JS实现获取参数面板控件值 | 获取参数面板中控件的实际值。 | |
| 参数查询 | JS实现决策报表参数界面自动查询 | 决策报表中通过参数面板实现参数查询实现不点击「查询」按钮，参数控件选择值之后即可将报表结果展现。 |
| JS实现参数组合筛选的前进和后退 | 记录每次查询的参数组合，方便前后切换。 | |
| JS实现日期控件取消选择值后不再传递参数 | 日期控件，选中日期后点击取消即可取消选择值。 | |
| JS实现日期控件点击确定后再查询 | 日期控件，选中日期后点击确定后再查询。 | |
| 页面刷新 | JS实现决策报表定时刷新 | 大屏页面定时刷新。 |
| JS隐藏正在加载图标与文字 | 刷新时，隐藏页面加载图标。 | |
| JS实现决策报表内报表块刷新/翻页 | 不刷新整个决策报表 ，而刷新报表里的某个报表块。 | |
| JS实现决策报表中网页框刷新 | 决策报表中刷新网页框中的报表或者其他跨域页面。 | |
| JS实现报表块数据变化后刷新联动的图表块 | 刷新图表块，图表块数据来源于报表块，报表块数据变化后，图表块也随之刷新。 | |
| 页面滚动、切换、跳转、联动 | JS实现自定义切换查看报表块 | 自定义切换报表块，实现 Tab 切换的功能。 |
| JS实现暂停和继续轮播报表 | 自定义轮播多张决策报表，功能类似于 Tab 轮播。 | |
| JS实现隐藏决策报表组件 | 通过按钮控制报表块、图表块的隐藏和显示。 | |
| JS实现决策报表中点击标题排序 | 报表块中实现动态排序，即根据参数值的不同来决定报表按某列升序还是降序排列。 | |
| JS实现点击跳转页面和定时跳转页面 | 点击一个报表块时跳转到另一张报表，或多张报表实现轮播。 | |
| JS实现决策报表中滚屏/跑马灯效果 | 报表块内容上下滚动，实现跑马灯效果。 | |
| 背景、边框、特效 | JS实现改变控件透明度 | 控件和深色背景不一致时，可通过修改控件的透明度来使其一致。 |
| JS设置动态背景/边框 | 制作大屏模板时，给报表或者报表中的某一部分添加动态背景或动态边框。 | |
| JS实现倒计时特效 | 地产、零售、电子商务等大屏制作时，经常会有倒计时的需求，例如：营销作战倒计时，零售促销倒计时等。 | |
| JS实现时间齿轮 | 动态时间齿轮，图表面板中央展示系统当前的实时时间，一般用于大屏场景展示。 | |
| 利用JS制作旋转木马效果 | 图片类似于旋转木马的方式轮播，可以用在大屏炫酷场景中。 | |
| JS实现时间烟花特效 | 倒计时烟花效果，可以用在大屏炫酷场景中。 | |
| JS 实现文字雪花效果 | 文字雪花特效，可以用在大屏炫酷场景中。 | |
| JS实现时钟效果 | 美观的钟表效果，可以用在大屏炫酷场景中。 |