添加链接 注册    登录
link管理
链接快照平台
  • 输入网页链接，自动生成快照
  • 标签化管理网页链接
相关文章推荐
有腹肌的大象  ·  2024年电工理论与新技术学科发展研讨会- 会议通·  8 月前    · 
曾经爱过的墨镜  ·  复旦大学黄志力课题组揭示莫达非尼促觉醒作用新机制·  1 年前    · 
冷静的毛豆  ·  厦门特色小吃- 知乎·  1 年前    · 
强健的苦瓜  ·  “瞰见”对话科创人物聚焦生物医学产业·  1 年前    · 
正直的乌龙茶  ·  聚酯纤维面料是什么？有哪些优缺点？·  1 年前    · 
link管理  ›  FVS页面接口- FineReport帮助文档 - 全面的报表使用教程和学习资料
返回值 string 显示接口 移动互联网终端
https://help.fanruan.com/finereport/doc-view-4941.html
发呆的抽屉
4 月前
报表服务器版本 插件版本 功能变动
11.0 V1.0.0 最低版本要求
11.0.22 V2.5.0

新增接口 getAllPages


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

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

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

11.0.9 V1.9.1 refresh 接口支持传参
11.0.9 V1.14.1 新增设置分页切换按钮显隐状态接口 setPageButtonDisplayPolicy
11.0.16 V1.18.0 新增关闭页面全屏接口 exitFullscreen
11.0.22 V2.2.1 新增全局传参接口 linkageGlobal
11.0.22 V2.4.0 新增暂停继续页面切换接口 pauseRollPlay、continueRollPlay
11.0.22 V2.4.1

FVS 统一 模板分页、表格组件分页、Tab组件标签页相关 API 接 口

详情请参见本文 获取页、操作页 相关内容

方法 getAllWidgets()

获取当前页面中所有组件对象，后续可以调用每个组件上的接口加以使用

参数 - -
返回值 Array 组件对象数组
示例

示例1：点击标题组件，一键隐藏当前页所有组件 

duchamp.getAllWidgets().forEach(widget => {
widget.setVisible(false);
})

示例2： 在 FVS 模板中，获取当前页面总共有多少组件，并弹窗显示 

var a = duchamp.getAllWidgets().length;
duchamp.Msg.alert({
      title: "提示" ,
       message:"当前页面总共有组件："+ a +"个"
}
)
应用示例

点击标题组件，获取当前页面总共有多少组件，并弹窗显示

点击下载模板： 获取当前页组件数量.fvs

E09666DE-CF74-4CEE-86F2-67E65F8A233E.GIF


移动端 支持移动端
方法 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

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

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

  • always：永远显示

  • hover：鼠标悬浮时显示

  • never：从不显示

返回值 - -
示例

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

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

duchamp.setPageButtonDisplayPolicy("always");

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

duchamp.setPageButtonDisplayPolicy("hover");

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

duchamp.setPageButtonDisplayPolicy("never");
应用示例 -
移动端 不支持移动端
方法
on(event, listener) 监听 FVS 中的事件
参数

event: strin g

listener

event: 事件名称，目前仅支持 storychange 事件

listener: 事件触发的回调函数

返回值 - -
示例

切换页面时，页面 2 的表格实现跑马灯效 果 

duchamp.on("storychange", (current) => {
        setTimeout(() => {
                if (current === "页面2") {
                        duchamp.getWidgetByName("表格").startMarquee() }
        }, 500);
});
应用示例 -
移动端 支持移动端



注：以下获取页及操作页接口需使用 V2.4.1 及之后版本，V2.4.1 之前版本接口请参考 历史接口 。

getPage

方法 getPage() 获取页
参数 value:page_number|name

根据页索引或页名称获取页

page_number：页索引，从 1 开始的正整数

name：页名称，字符串

返回值 {
setVisible: (visible: boolean) => void,
goto: (options?: { [key: string]: string }) => void,
getName: () => string,
getIndex: () => number,
isVisible: () => boolean,
}

{

visible:可见性

options:跳转的页面对象

name:页面名称

number:页面索引，从 1 开始的正整数

}

示例

示例1： 在 FVS 模板中，获取「 页面1 」 

duchamp.getPage("页面1");

示例2： 在 FVS 模板中，「 表格1 」组件设置了分页，获取「表格1」组件的分页1 

duchamp.getWidgetByName('表格1').getPage(1);

示例3：在 FVS 模板中，获取「Tab1」组件第一个标签页 

duchamp.getWidgetByName('Tab1').getPage(1);
应用示例

-

移动端 支持移动端

getPreviousPage

方法 getPreviousPage() 获取上一页
参数 -

-

返回值 {
setVisible: (visible: boolean) => void,
goto: (options?: { [key: string]: string }) => void,
getName: () => string,
getIndex: () => number,
isVisible: () => boolean,
}

{

visible:可见性

options:跳转的页面对象

name:页面名称

number:页面索引，从 1 开始的正整数

}

示例

示例1： 在 FVS 模板中，获取当前页的上一页 

duchamp.getPreviousPage();

示例2： 在 FVS 模板中，「 表格1 」组件设置了分页，获取「表格1」组件当前页的上一页 

duchamp.getWidgetByName('表格1').getPreviousPage();

示例3：在 FVS 模板中，获取「Tab1」组件当前页的上一页 

duchamp.getWidgetByName('Tab1').getPreviousPage();
应用示例 -
移动端 支持移动端

getNextPage

方法 getNextPage() 获取下一页
参数 -

-

返回值 {
setVisible: (visible: boolean) => void,
goto: (options?: { [key: string]: string }) => void,
getName: () => string,
getIndex: () => number,
isVisible: () => boolean,
}

{

visible:可见性

options:跳转的页面对象

name:页面名称

number:页面索引，从 1 开始的正整数

}

示例

示例1： 在 FVS 模板中，获取当前页的 下 一页 

duchamp.getNextPage();

示例2： 在 FVS 模板中，「 表格1 」组件设置了分页，获取「表格1」组件当前页的 下 一页 

duchamp.getWidgetByName('表格1').getNextPage();

示例3：在 FVS 模板中，获取「Tab1」组件当前页的 下 一页 

duchamp.getWidgetByName('Tab1').getNextPage();
应用示例 -
移动端 支持移动端

getFirstPage

方法 getFirstPage() 获取第一页
参数 -

-

返回值 {
setVisible: (visible: boolean) => void,
goto: (options?: { [key: string]: string }) => void,
getName: () => string,
getIndex: () => number,
isVisible: () => boolean,
}

{

visible:可见性

options:跳转的页面对象

name:页面名称

number:页面索引，从 1 开始的正整数

}

示例

示例1： 在 FVS 模板中，获取模板的第一页 

duchamp.getFirstPage();

示例2： 在 FVS 模板中，「 表格1 」组件设置了分页，获取「表格1」组件第一页 

duchamp.getWidgetByName('表格1').getFirstPage();

示例3：在 FVS 模板中，获取「Tab1」组件 第一页 

duchamp.getWidgetByName('Tab1').getFirstPage();
应用示例 -
移动端 支持移动端

getLastPage

方法 getLastPage() 获取最后一页
参数 -

-

返回值 {
setVisible: (visible: boolean) => void,
goto: (options?: { [key: string]: string }) => void,
getName: () => string,
getIndex: () => number,
isVisible: () => boolean,
}

{

visible:可见性

options:跳转的页面对象

name:页面名称

number:页面索引，从 1 开始的正整数

}

示例

示例1： 在 FVS 模板中，获取模板的 最后 一页 

duchamp.getLastPage();

示例2： 在 FVS 模板中，「 表格1 」组件设置了分页，获取「表格1」组件 最后 一页 

duchamp.getWidgetByName('表格1').getLastPage();

示例3：在 FVS 模板中，获取「Tab1」组件 最后 一页 

duchamp.getWidgetByName('Tab1').getLastPage();
应用示例 -
移动端 支持移动端

getCurrentPage


方法 getCurrentPage() 获取当前页
参数 -

-

返回值 {
setVisible: (visible: boolean) => void,
goto: (options?: { [key: string]: string }) => void,
getName: () => string,
getIndex: () => number,
isVisible: () => boolean,
}

{

visible:可见性

options:跳转的页面对象

name:页面名称

number:页面索引，从 1 开始的正整数

}

示例

示例1： 在 FVS 模板中，获取模板展示的 当前 页 

duchamp.getCurrentPage();

示例2： 在 FVS 模板中，「 表格1 」组件设置了分页，获取「表格1」组件当前页 

duchamp.getWidgetByName('表格1').getCurrentPage();

示例3：在 FVS 模板中，获取「Tab1」组件当前页 

duchamp.getWidgetByName('Tab1').getCurrentPage();
应用示例 -
移动端 支持移动端

getAllPages

注：该接口需使用 V2.5.0 及之后版本。

方法 getAllPages() 获取所有页
参数 -

-

返回值 page[x]

页面数组， x 从 0 开始，0 表示第一页

注：这里与页面索引不一样，页面索引从 1 开始

示例

示例1： 在 FVS 模板中，获取模板总共有多少页，并弹窗显示 

var a = duchamp.getAllPages().length;
duchamp.Msg.alert({
      title: "提示" ,
       message:"当前模板总页数为："+ a
}
)

示例2： 在 FVS 模板中，「 表格1 」组件设置了分页，获取「表格1」组件第二页的名称 

duchamp.getWidgetByName('表格1').getAllPages()[1].getName();

示例3：在 FVS 模板中，获取「Tab1」组件第一页的索引 

duchamp.getWidgetByName('Tab1').getAllPages()[0].getIndex();
应用示例

点击下载模板 ： FVS获取模板总页数.fvs

6D2E55A8-6F57-497D-AC1A-D18799FEF59E.GIF

移动端 支持移动端

以下接口需结合获取页接口使用

setVisible

方法 setVisible()

设置页面显示或隐 藏

注：若隐藏正在展示的页面，会弹出提示「无法隐藏当前页」

参数 visible: boolean

页面是否显示，布尔型

  • true：显示

  • false：隐 藏

返回值 - -
示例

示例1： 在 FVS 模板中， 隐藏模板 「页面1」 

duchamp.getPage("页面1").setVisible(false);

示例2： 在 FVS 模板中，「 表格1 」组件设置了分页， 隐藏表格 分页1 

duchamp.getWidgetByName('表格1').getPage(1).setVisible(false);

示例3：在 FVS 模板中，隐藏「Tab1」组件标签页1 

duchamp.getWidgetByName('Tab1').getPage(1).setVisible(false);
应用示例 点击下载模板： FVS设置页面显示或隐藏.fvs
9612832F-16A8-4613-A0BF-69B82887402C.GIF
移动端 支持移动端

isVisible

方法 isVisible() 获取页面显示/隐藏状态
参数 - -
返回值 visible: boolean

页面是否显示，布尔型

  • true：显示

  • false：隐 藏

示例

示例1： 在 FVS 模板中，获取「页面2」，返回其显示隐藏状态并弹窗提示 

var a = duchamp.getPage("页面2").isVisible();
duchamp.Msg.alert({
      title: "提示" ,
       message:"页面2显隐状态为 "+ a
}
)

示例2： 在 FVS 模板中，「 表格1 」组件设置了分页，获取 表格 分页2，返回其显隐状态 

duchamp.getWidgetByName('表格1').getPage(2).isVisible();

示例3：在 FVS 模板中，获取「Tab1」组件标签页2，返回其显隐状态 

duchamp.getWidgetByName('Tab1').getPage(2).isVisible();
应用示例

点击下载模板 ： FVS获取页面显隐状态.fvs

2E378EC5-0123-4B92-A0EE-4CBCDDFF4AF1.GIF

移动端 支持移动端

goto

方法 goto() 跳转到获取的页面
参数 {para:"para"} 参数名:参数值
返回值 - -
示例

示例1： 在 FVS 模板中， 跳转到下一页 

duchamp.getNextPage().goto();

示例2： 在 FVS 模板中，「 表格1 」组件设置了分页，跳转表格下一页 

duchamp.getWidgetByName('表格1').getNextPage().goto();

示例3：在 FVS 模板中，跳转「Tab1」组件下一页 

duchamp.getWidgetByName('Tab1').getNextPage().goto();

示例4： 在 FVS 模板中， 跳转到下一页并传参

注：V2.9.0.1 及之后版本，Tab组件和表格组件才支持传参，之前版本，仅模板分页支持传参 

duchamp.getNextPage().goto({a:"参数a"});

传递多个参数写法如下： 

duchamp.getNextPage().goto({a:"参数a",b:"参数b"});
应用示例

点击下载模板 ： FVS页面跳转.fvs

76E86635-0339-4C89-B1C9-AE6845D3F912.GIF

移动端 支持移动端

getName

方法 getName() 获取页面名称
参数 - -
返回值 name:string 页面名称，字符串
示例

示例1： 在 FVS 模板中，获取当前页面名称并弹窗显示 

var name = duchamp.getCurrentPage().getName();
duchamp.Msg.alert({
      title: "提示" ,
      message:"当前页面名称为 "+ name
}
)

示例2：在 FVS 模板中，获取「Tab1」组件当前页面名称并弹窗显示 

var name = duchamp.getWidgetByName('Tab1').getCurrentPage().getName();
duchamp.Msg.alert({
      title: "提示" ,
      message:"当前页面名称为 "+ name
}
)

注：表格组件分页没有名称，若使用上述 JS ，返回值为 undefined

应用示例 点击下载模板： FVS获取页面名称.fvs
95EBD249-4502-4F6D-BD50-D770C4C3E99A.GIF
移动端 支持移动端

getIndex

方法 getIndex() 获取页面索引
参数 - -
返回值 number 页面索引，从 1 开始的正整数
示例

示例1： 在 FVS 模板中，获取当前页面索引并弹窗显示 

var number = duchamp.getCurrentPage().getIndex();
duchamp.Msg.alert({
      title: "提示" ,
      message:"当前页面名称为 "+ number
}
)

示例2： 在 FVS 模板中，获取「表格1」组件当前页面索引并弹窗显示 

var number = duchamp.getWidgetByName('表格1').getCurrentPage().getIndex();
duchamp.Msg.alert({
      title: "提示" ,
      message:"表格当前页面索引为 "+ number
}
)

示例3：在 FVS 模板中，获取「Tab1」组件当前页面索引并弹窗显示 

var number = duchamp.getWidgetByName('Tab1').getCurrentPage().getIndex();
duchamp.Msg.alert({
      title: "提示" ,
      message:"Tab当前页面索引为 "+ number
}
)
应用示例 点击下载模板： FVS获取页面索引.fvs
428D83C2-388A-4057-8FAA-A366C2FFD5F9.GIF
移动端 支持移动端


 
推荐文章
有腹肌的大象  ·  2024年电工理论与新技术学科发展研讨会- 会议通
8 月前
曾经爱过的墨镜  ·  复旦大学黄志力课题组揭示莫达非尼促觉醒作用新机制
1 年前
冷静的毛豆  ·  厦门特色小吃- 知乎
1 年前
强健的苦瓜  ·  “瞰见”对话科创人物聚焦生物医学产业
1 年前
正直的乌龙茶  ·  聚酯纤维面料是什么？有哪些优缺点？
1 年前
Link管理   ·   51好读   ·   Sov5搜索   ·   小百科
link管理 - 链接快照平台