历史版本23 :FVS页面接口 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

适用场景：安装了「FineVis数据可视化」插件的用户，可参考本文了解 FineVis 的相关功能。


目录:

版本编辑

报表服务器版本插件版本功能变动
11.0V1.0.0最低版本要求
11.0.22V2.1.1新增显示/隐藏分页接口 showStory 、hideStory


查看历史版本更新
报表服务器版本插件版本功能变动
11.0.7
V1.8.0

支持接口 this，可获取当前的组件对象，获取后可以使用组件的方法和属性

支持接口 getAllWidgets，可获取当前页所有组件

11.0.9V1.9.1refresh 接口支持传参
11.0.9V1.14.1新增设置分页切换按钮显隐状态接口 setPageButtonDisplayPolicy 
11.0.16V1.16.0switchStory、nextStory、previousStory 接口支持传参
11.0.16V1.18.0新增关闭页面全屏接口 exitFullscreen

this编辑

方法this获取当前的组件对象，获取后可以使用组件的方法和属性
     参数--
   返回值object 当前组件对象
     示例

示例1：获取当前控件组件的实际值

this.getValue();

示例2：设置当前控件不可见

this.setVisible(false);

示例3：清空当前控件的值

this.reset();


  应用示例

-

    移动端支持移动端

getAllWidgets编辑

方法getAllWidgets()获取当前页面中所有组件信息
     参数--
   返回值{ [key: string,value:object] }key 为组件名，value 为组件对象
     示例

查看当前页面中所有的组件信息：

duchamp.getAllWidgets();


  应用示例

浏览器 F12 开发者工具查看 FVS 模板「页面1」中所有的组件信息：

Snag_2e1342ab.png

   移动端支持移动端

getWidgetByName编辑

方法getWidgetByName(name)获取当前页面中的某个组件
     参数name: string组件名称，字符串
   返回值object 组件对象
     示例

注：代码添加在「初始化后」事件中时，建议添加一个延迟函数，否则可能会因为报表对象没有完全创建而发生错误例如开启表格跑马灯：

setTimeout(() => {
        duchamp.getWidgetByName("表格").startMarquee()        
}, 500)


  应用示例

获取表格组件，并开启表格跑马灯。详情请参见：FVS表格跑马灯

    移动端支持移动端

switchStory编辑

方法switchStory(name)跳转到指定页面
     参数name,{para:"para"}指定页面的名称，字符串
   返回值--
     示例

示例1：点击跳转到「页面4」

duchamp.switchStory("页面4");

示例2：点击跳转到「页面4」并传参（仅支持 V1.16.0 及之后版本）

duchamp.switchStory("页面4",{area:"华北"});

注：传递多个参数时，写法如下

duchamp.switchStory("页面名称",{a:"参数a",b:"参数b"});


  应用示例

JS实现FVS切换分页

    移动端支持移动端

nextStory编辑

方法nextStory()跳转到下一页
     参数{para:"para"}参数名称:参数值
   返回值--
     示例

示例1：跳转到下一页

duchamp.nextStory();

示例2：跳转到下一页并传参（仅支持 V1.16.0 及之后版本）

duchamp.nextStory({area:"华北"});

注：传递多个参数时，写法如下

duchamp.nextStory({a:"参数a",b:"参数b"});


  应用示例

JS实现FVS切换分页

    移动端支持移动端

previousStory编辑

方法previousStory()跳转到上一页
     参数{para:"para"}参数名称:参数值
   返回值--
     示例

示例1：跳转到上一页

duchamp.previousStory();

示例2：跳转到上一页并传参（仅支持 V1.16.0 及之后版本）

duchamp.previousStory({area:"华北"});

注：传递多个参数时，写法如下

duchamp.previousStory({a:"参数a",b:"参数b"});


  应用示例

JS实现FVS切换分页

    移动端支持移动端

refresh编辑

方法refresh()触发组件刷新
     参数{para:"para"}参数名称:参数值
   返回值--
     示例

示例1：触发「组件1」刷新

duchamp.getWidgetByName("组件1").refresh();

示例2：触发「柱形图」组件刷新并将地区华北作为参数传递给柱形图

duchamp.getWidgetByName("柱形图").refresh({area:"华北"});

注：给同一组件传多个参数时，写法如下

duchamp.getWidgetByName("组件").refresh({a:"参数值",b:"参数值"});


  应用示例

点击标题组件，触发「柱形图」组件刷新并将地区华北作为参数传递给柱形图

点击可下载模板：refresh刷新组件.fvs

EFD446D9-5766-4113-9B07-47249EC79F29.GIF

    移动端支持移动端

trigger编辑

方法trigger()

触发组件点击事件

注：不支持三维组件和控件组件

     参数-

-

   返回值--
     示例

触发「组件1」的所有点击事件

duchamp.getWidgetByName("组件1").trigger();


  应用示例

-

    移动端支持移动端

requestFullscreen编辑

方法requestFullscreen()触发页面全屏
     参数--
   返回值--
     示例

示例：给标题组件添加点击 JavaScript 事件，触发页面全屏

duchamp.requestFullscreen();


  应用示例

-

    移动端不支持移动端

exitFullscreen编辑

方法exitFullscreen()

关闭页面全屏

注：仅针对 requestFullscreen 接口触发的全屏，若使用按键 F11 触发全屏，则该接口无效

     参数--
   返回值--
     示例

示例：给标题组件添加点击 JavaScript 事件，关闭页面全屏

duchamp.exitFullscreen();


  应用示例

-

    移动端不支持移动端

reload编辑

方法reload()触发模板整体刷新
     参数--
   返回值--
     示例

每两秒刷新一次页面

setInterval(() => {
    duchamp.reload();
  }, 2 * 1000);


  应用示例

V1.7.2 版本之前的插件，只能通过模板的「模板>页面加载结束事件」写 JavaScript 代码实现

V1.7.2 及之后版本，可通过「模板定时刷新」功能设置，详情请参见：FVS模板定时刷新

    移动端支持移动端

setPageButtonDisplayPolicy编辑

方法setPageButtonDisplayPolicy()设置多分页模板左下角切换分页按钮是否显示
     参数always/hover/never

切换按钮的三种状态（默认为 always）：

  • always：永远显示

  • hover：鼠标悬浮时显示

  • never：从不显示

   返回值--
     示例

可添加以下代码在模板的「加载结束事件」中

示例1：设置切换按钮永远显示

duchamp.setPageButtonDisplayPolicy("always");

示例2：设置切换按钮隐藏，鼠标悬浮时显示

duchamp.setPageButtonDisplayPolicy("hover");

示例3：设置切换按钮从不显示

duchamp.setPageButtonDisplayPolicy("never"); 


  应用示例-
    移动端不支持移动端

showStory编辑

方法showStory(name)显示分页
     参数name:string要显示的页面名称
   返回值--
     示例

示例：显示页面1

duchamp.showStory("页面1");


  应用示例

JS实现分页的显示隐藏.fvs

    移动端支持移动端

hideStory编辑

方法hideStory(name)隐藏分页
     参数name:string要隐藏的页面名称
   返回值--
     示例

示例：隐藏页面2

duchamp.hideStory("页面2");


  应用示例

JS实现分页的显示隐藏.fvs

    移动端支持移动端