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

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

url 后缀参数 page=x ，x 从 0 开始

page=0 表示第一页

url 后缀参数改为 page_number=x , x 从 1 开始

page_number=1 表示第一页

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

this.getValue();

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

this.setVisible(false);

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

this.reset();

-

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

duchamp.getAllWidgets();

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

示例：获取标题组件

duchamp.getWidgetByName('标题组件1_页面1');

-

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

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

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

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

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

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

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

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

-

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

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

-

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

duchamp.requestFullscreen();

-

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

duchamp.exitFullscreen();

-

每两秒刷新一次页面

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

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

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

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

• always：永远显示

• hover：鼠标悬浮时显示

• never：从不显示
  

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

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

duchamp.setPageButtonDisplayPolicy("always");

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

duchamp.setPageButtonDisplayPolicy("hover");

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

duchamp.setPageButtonDisplayPolicy("never");

无需获取多个参数控件分别赋值，使用该接口即可实现全局参数联动，对所有分页生效

示例：点击标题组件，将「华北」作为参数值，传递给模板内所有使用了参数 area 的组件

duchamp.linkageGlobal({area:"华北"})

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

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

点击下载模板：参数全局联动接口示例.fvs

多分页模板开启自动切换页面时，暂停页面自动切换

duchamp.pauseRollPlay();

点击下载模板：JS实现暂停继续页面切换.fvs

多分页模板开启自动切换页面时，暂停页面自动切换后，继续页面自动切换

duchamp.continueRollPlay();

点击下载模板：JS实现暂停继续页面切换.fvs

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

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

name：页名称，字符串

{

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);

-

-

{

visible:可见性

options:跳转的页面对象

name:页面名称

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

}

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

duchamp.getPreviousPage();

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

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

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

duchamp.getWidgetByName('Tab1').getPreviousPage();

-

{

visible:可见性

options:跳转的页面对象

name:页面名称

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

}

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

duchamp.getNextPage();

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

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

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

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

-

{

visible:可见性

options:跳转的页面对象

name:页面名称

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

}

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

duchamp.getFirstPage();

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

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

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

duchamp.getWidgetByName('Tab1').getFirstPage();

-

{

visible:可见性

options:跳转的页面对象

name:页面名称

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

}

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

duchamp.getLastPage();

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

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

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

duchamp.getWidgetByName('Tab1').getLastPage();

-

{

visible:可见性

options:跳转的页面对象

name:页面名称

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

}

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

duchamp.getCurrentPage();

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

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

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

duchamp.getWidgetByName('Tab1').getCurrentPage();

页面是否显示，布尔型

• 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);

页面是否显示，布尔型

• 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

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

duchamp.getNextPage().goto();

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

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

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

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

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

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

传递多个参数写法如下：

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

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

示例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

示例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
}
)