历史版本30 :控件通用 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

版本编辑

版本功能变动
11.0

和 10.0 区别：

新增 getType、setWaterMark、setPopupStyle 接口

11.0.7

FVS 大屏编辑模式插件 V1.5.0 版本新增 控件组件，适配部分接口

与普通报表和决策报表的区别：需要将 _g().xxx 替换为 duchamp.xxx 

11.0.11APP/HTML5 11.0.76 及以后版本，return false 接口部分支持移动端

注：FVS 大屏模板 不支持移动端，以下备注支持移动端的仅针对于普通报表和决策报表。

在使用接口前，请务必先仔细阅读 JS API 兼容说明，接口默认支持普通报表和决策报表（新版）。

getValue编辑

方法getValue()

获取控件的实际值

     参数--
   返回值any
     示例

示例1：若取到的控件对象定义为 widget，获取控件的实际值

widget.getValue();

示例2：获取参数面板上 text0 控件的实际值

_g().getParameterContainer().getWidgetByName("text0").getValue();

示例3：普通报表中获取填报单元格中 text0 控件的实际值

_g().getWidgetByName("text0").getValue();

示例4：决策报表中获取 body 中 text0 控件的实际值

新自适应：_g().getWidgetByName("text0").getValue();
旧自适应：_g().getParameterContainer().getWidgetByName("text0").getValue();

示例5：FVS 大屏模板中获取控件组件 text0 的实际值

duchamp.getWidgetByName("text0").getValue();

注：FVS 插件 V1.16.0 及之后版本，标题组件 也支持 getValue() 接口，用法与示例 5 一致。

  应用示例

获取日期控件的值，当开始时间和结束时间相差大于 30 天时，弹窗提醒：

详细实现方法可参考：JS实现日期控件查询天数控制

2021-09-06_11-08-34.gif

   移动端支持移动端

getText编辑

方法getText()

获取控件的显示值

     参数--
   返回值string
     示例

示例1：若获取到的控件对象定义为 widget，获取控件的显示值

widget.getText();

示例2：获取参数面板上 text0 控件的显示值

_g().getParameterContainer().getWidgetByName("text0").getText();

示例3：普通报表中获取填报单元格中 text0 控件的显示值

_g().getWidgetByName("text0").getText();

示例4：决策报表中获取 body 中 text0 控件的显示值

_g().getWidgetByName("text0").getText();

示例5：FVS 大屏模板中获取控件组件 text0 的显示值

duchamp.getWidgetByName("text0").getText();


  应用示例

下拉框选择值后，打印其实际值和显示值：

点击可下载模板：获取控件显示值.cpt

2021-11-01_15-34-34.gif


   移动端支持移动端

setValue编辑

方法setValue(value)设置控件的值
     参数value: any控件值，任意格式
   返回值void
     示例

示例1：若获取到的控件对象定义为 widget，设置控件的值为“文本”

widget.setValue('文本');

示例2：获取参数面板上控件 text0 ，将其控件值设置为“文本”

_g().getParameterContainer().getWidgetByName("text0").setValue('文本');

示例3：普通报表中获取填报单元格中 text0 控件，将其控件值设置为“文本”

_g().getWidgetByName("text0").setValue('文本');

示例4：决策报表中获取 body 中 text0 控件，将其控件值设置为“文本”

_g().getWidgetByName("text0").setValue('文本');

示例5：普通报表中给参数面板上的下拉复选框赋多个值：

_g().getParameterContainer().getWidgetByName("comboCheckBox0").setValue("孙阳,孙林");

示例6：FVS 大屏模板中获取控件组件 text0 ，将其控件值设置为“文本”

duchamp.getWidgetByName("text0").setValue('文本');
  应用示例

点击按钮，给日期控件设置合适的值：

详细实现方法可参考：JS实现自定义按钮快速给参数赋指定范围值

2021-09-06_13-43-31.gif

   移动端支持移动端

visible编辑

注：FVS 大屏模板不支持 visible 。

方法visible()设置控件可见
     参数--
   返回值void
     示例

示例1：若获取到的控件对象定义为 widget，设置其可见

widget.visible();

示例2：获取参数面板上控件 text0 ，设置其可见

_g().getParameterContainer().getWidgetByName("text0").visible();

示例3：普通报表中获取填报单元格中 text0 控件，设置其可见

_g().getWidgetByName("text0").visible();

示例4：决策报表中获取 body 中 text0 控件，设置其可见

_g().getWidgetByName("text0").visible();
  应用示例

点击按钮，显示参数面板中的部分控件：

点击可下载模板：设置控件值可见.cpt

2021-11-01_15-50-37.gif

   移动端支持移动端

invisible编辑

注：FVS 大屏模板不支持 invisible 。

方法invisible()设置控件不可见
     参数--
   返回值void
     示例

示例1：若获取到的控件对象定义为 widget，设置其不可见

widget.invisible();

示例2：获取参数面板上控件 text0 ，设置其不可见

_g().getParameterContainer().getWidgetByName("text0").invisible();

示例3：普通报表中获取填报单元格中 text0 控件，设置其不可见

_g().getWidgetByName("text0").invisible();

示例4：决策报表中获取 body 中 text0 控件，设置其不可见

_g().getWidgetByName("text0").invisible();
  应用示例

点击按钮，隐藏参数面板中部分控件：

点击可下载模板：设置控件值不可见.cpt

2021-09-06_15-22-47.gif

   移动端支持移动端

setVisible编辑

方法setVisible(visibility)设置控件可见/不可见
     参数visibility: boolean

是否可见，布尔型

  • true：可见

  • false：不可见

   返回值void
     示例

示例1：若获取到的控件对象定义为 widget，设置其不可见

widget.setVisible(false);

示例2：获取参数面板上控件 text0 ，设置其不可见

_g().getParameterContainer().getWidgetByName("text0").setVisible(false);

示例3：普通报表中获取填报单元格中 text0 控件，设置其不可见

_g().getWidgetByName("text0").setVisible(false);

示例4：决策报表中获取 body 中 text0 控件，设置其不可见

_g().getWidgetByName("text0").setVisible(false);

示例5：FVS 大屏模板中获取控件组件 text0 ，设置其不可见

duchamp.getWidgetByName("text0").setVisible(false);


  应用示例

只有前面的下拉框选择了内容之后，后一层下拉框控件才显示出来：

详细实现方法可参考：JS根据条件显示参数控件

2021-09-06_14-31-32.gif

   移动端移动端部分支持，报表填报单元格中的控件不支持

isVisible编辑

方法isVisible()控件是否可见
     参数-

-

   返回值boolean

是否可见，布尔型

  • true：可见

  • false：不可见

     示例

示例1：若获取到的控件对象定义为 widget，返回其是否可见

widget.isVisible();

示例2：获取参数面板上控件 text0 ，返回其是否可见

_g().getParameterContainer().getWidgetByName("text0").isVisible();

示例3：普通报表中获取填报单元格中 text0 控件，返回其是否可见

_g().getWidgetByName("text0").isVisible();

示例4：决策报表中获取 body 中 text0 控件，返回其是否可见

_g().getWidgetByName("text0").isVisible();

示例5：FVS 大屏模板中获取控件组件 text0 ，返回其是否可见

duchamp.getWidgetByName("text0").isVisible();


  应用示例

省份控件选择值后，查询按钮显示；否则，查询按钮不显示：

点击可下载模板：控件是否可见.cpt

2021-09-07_10-21-47.gif

   移动端

移动端部分支持，报表填报单元格中的控件不支持

setEnable编辑

方法setEnable(enabled)设置控件可用/不可用
     参数enabled: boolean

是否可用，布尔型

true：可用

false：不可用

   返回值void
     示例

示例1：若获取到的控件对象定义为 widget，设置其不可用

widget.setEnable(false);

示例2：获取参数面板上控件 text0 ，设置其不可用

_g().getParameterContainer().getWidgetByName("text0").setEnable(false);

示例3：普通报表中获取填报单元格中 text0 控件，设置其不可用

_g().getWidgetByName("text0").setEnable(false);

示例4：决策报表中获取 body 中 text0 控件，设置其不可用

_g().getWidgetByName("text0").setEnable(false);

示例5：FVS 大屏模板中获取控件组件 text0 ，设置其不可用

duchamp.getWidgetByName("text0").setEnable(false);


  应用示例

成绩只能选择一次，选择后将控件设置为不可用：

详细实现方法可参考：JS实现填报控件只能填写一次

2021-09-07_10-46-26.gif

   移动端移动端部分支持，报表填报单元格中的控件不支持

isEnabled编辑

方法isEnabled()控件是否可用
     参数-

-

   返回值boolean

是否可用，布尔型

  • true：可用

  • false：不可用

     示例

示例1：若获取到的控件对象定义为 widget，返回其是否可用

widget.isEnabled();

示例2：获取参数面板上控件 text0 ，返回其是否可用

_g().getParameterContainer().getWidgetByName("text0").isEnabled();

示例3：普通报表中获取填报单元格中 text0 控件，返回其是否可用

_g().getWidgetByName("text0").isEnabled();

示例4：决策报表中获取 body 中 text0 控件，返回其是否可用

_g().getWidgetByName("text0").isEnabled();

示例5：FVS 大屏模板中获取控件组件 text0 ，返回其是否可用

duchamp.getWidgetByName("text0").isEnabled();


  应用示例

省份控件选择值后，查询按钮可用；否则，查询按钮不可用：

点击可下载模板：控件是否可用.cpt

2021-09-07_11-12-54.gif

   移动端移动端部分支持，报表填报单元格中的控件不支持

reset编辑

方法reset()重置控件、清空控件的内容
     参数-

-

   返回值void
     示例

示例1：若获取到的控件对象定义为 widget，清空控件的内容

widget.reset();

示例2：获取参数面板上控件 text0 ，清空控件的内容

_g().getParameterContainer().getWidgetByName("text0").reset();

示例3：普通报表中获取填报单元格中 text0 控件，清空控件的内容

_g().getWidgetByName("text0").reset();

示例4：决策报表中获取 body 中 text0 控件，清空控件的内容

_g().getWidgetByName("text0").reset();

示例5：FVS 大屏模板中获取控件组件 text0 ，清空控件的内容

duchamp.getWidgetByName("text0").reset();


  应用示例

点击按钮，清空所有控件值：

详细实现方法可参考：JS实现清空控件内容

2021-09-07_16-18-40.gif

   移动端支持移动端

getType编辑

注：FVS 大屏模板不支持 getType 。

方法getType()获取控件类型
     参数-

-

   返回值string字符串，返回默认的控件名称类型，如按钮为 button、下拉框为 comboBox
     示例

示例1：若获取到的控件对象定义为 widget，返回其类型

widget.getType();

示例2：获取参数面板上控件 text0 ，返回其类型

_g().getParameterContainer().getWidgetByName("text0").getType();

示例3：普通报表中获取填报单元格中 text0 控件，返回其类型

_g().getWidgetByName("text0").getType(); 

示例4：决策报表中获取 body 中 text0 控件，返回其类型

_g().getWidgetByName("text0").getType();
  应用示例

点击按钮获取控件类型：

点击可下载模板：查看控件类型.cpt

2021-09-14_9-41-22.gif

   移动端支持移动端

setWaterMark编辑

方法setWaterMark(text)添加水印文字（仅支持有输入框的控件）
     参数text: string

水印文字，字符串

   返回值void
     示例

示例1：若获取到的控件对象定义为 widget，为其添加“请输入姓名”的水印

widget.setWaterMark('请输入姓名');

示例2：获取参数面板上控件 text0 ，为其添加“请输入姓名”的水印

_g().getParameterContainer().getWidgetByName("text0").setWaterMark('请输入姓名');

示例3：普通报表中获取填报单元格中 text0 控件，为其添加“请输入姓名”的水印

_g().getWidgetByName("text0").setWaterMark('请输入姓名');

示例4：决策报表中获取 body 中 text0 控件，为其添加“请输入姓名”的水印

_g().getWidgetByName("text0").setWaterMark('请输入姓名');

注：添加事件后由于报表块对象没有完全创建导致报错后，可以添加一个延迟函数延迟执行，如：

setTimeout(function(){
    _g().getParameterContainer().getWidgetByName("text0").
    setWaterMark('请输入姓名');
}, 500);

示例5：FVS 大屏模板中获取控件组件 text0 ，为其添加“请输入姓名”的水印

duchamp.getWidgetByName("text0").setWaterMark('请输入姓名');


  应用示例

给文本框控件添加水印：

点击可下载模板：控件水印.cpt

   移动端支持移动端

fireEvent编辑

注：FVS 大屏模板不支持 fireEvent 。

方法fireEvent(eventName);调用控件事件
     参数eventName: string

事件类型，字符串，值可参考：控件事件，如「初始化后」事件为 afterinit

   返回值void
     示例

示例1：若获取到的控件对象定义为 widget，触发控件的「初始化后」事件

widget.fireEvent('afterinit');

示例2：获取参数面板上控件 text0 ，触发其「初始化后」事件

_g().getParameterContainer().getWidgetByName("text0").fireEvent('afterinit');

示例3：普通报表中获取填报单元格中 text0 控件，触发其「初始化后」事件

_g().getWidgetByName("text0").fireEvent('afterinit');

示例4：决策报表中获取 body 中 text0 控件，触发其「初始化后」事件

_g().getWidgetByName("text0").fireEvent('afterinit');
  应用示例

决策报表中，点击按钮给日期控件赋值，同时触发日期控件的「编辑后」事件提交参数查询：

详细实现方法可参考：查询不同时间周期的数据

2021-09-07_14-36-55.gif

    移动端支持移动端

setPopupStyle编辑

注：FVS 大屏模板不支持 setPopupStyle 。

方法

setPopupStyle(PopupStyle)

设置控件下拉选项框的样式，仅支持有选项框的控件，如下拉框、下拉复选框

     参数

PopupStyle:{

    itemHeight: string;
    fontSize: string;
}

PopupStyle：弹出框样式，json 格式

  • itemHeight：弹出框中选项的高度

  • fontSize:：弹出框中字体大小

   返回值void
     示例

示例1：若获取到的下拉框控件对象定义为 widget，设置其弹出框选项高度为 30px、字体大小为 20px

widget.setPopupStyle({
    itemHeight:"30px",
    fontSize:"20px"
});

示例2：获取参数面板上下拉框控件 comboBox0 ，设置其弹出框选项高度为 30px、字体大小为 20px

widget.setPopupStyle({
    itemHeight:"30px",
    fontSize:"20px"
});

示例3：普通报表中获取填报单元格中下拉框控件 comboBox0，设置其弹出框选项高度为 30px、字体大小为 20px

_g().getWidgetByName("comboBox0").setPopupStyle({
    itemHeight:"10px",
    fontSize:"10px"
});

示例4：决策报表中获取 body 中下拉框控件 comboBox0，设置其弹出框选项高度为 30px、字体大小为 20px

_g().getWidgetByName("comboBox0").setPopupStyle({
    itemHeight:"30px",
    fontSize:"20px"
});

注：添加事件后由于报表块对象没有完全创建导致报错后，可以添加一个延迟函数延迟执行，如：

setTimeout(function(){
_g().getParameterContainer().getWidgetByName("comboBox0").setPopupStyle({
    itemHeight: "10px",
    fontSize: "10px"
});
}, 500);
  应用示例

设置「下拉框」下拉选项框选项高度为 30px、字体大小为 20px：

点击了下载模板：控件样式.cpt

    移动端不支持移动端

return false编辑

注：FVS 大屏模板不支持 return false 。

方法-

事件中加入 return false，用于阻塞后续动作执行，如给查询按钮加一个事件用来阻止其查询。

     参数-

-

   返回值-
     示例

给决策报表的下拉复选框控件，添加一个「编辑后」事件，事件内容为：

return false;
  应用示例

给查询按钮加一个阻止查询事件，当地区选择华东时不查询，选择华北时查询：

2023-01-06_16-06-18.gif



点击可下载模板：查询按钮选择性查询.cpt

    移动端

报表服务器 11.0.11 且 APP\H5  11.0.76 及以上版本，移动端支持使用该接口，但不支持「阻止触发联动」的功能，比如阻止决策报表 body 中控件选完值后的默认查询。