反馈已提交

网络繁忙

JS控制单元格控件是否可用/可见

  • 文档创建者:星踪
  • 编辑次数:7次
  • 最近更新:Leo.Tsai 于 2022-08-19
  • 1. 概述

    1.1 问题描述

    希望根据一些条件来动态控制控件的可用和可见状态。比如下图所示模板,希望当中止列选择"是"的时候,单价清空且不可编辑。

    1.2 实现思路

    使用条件属性可以在页面初始加载后实现控件的状态控制 ,但是后续无法根据用户的一些操作来再次改变控件状态,此时需要使用控件的JS接口来实现需求。

    接口说明可以参考:控件通用

    2. 示例

    2.1 数据准备

    新建数据集 ds1,从 FRDemo 取数,SQL 语句为:SELECT * FROM S产品 limit 3

    2.2 模板设计

    1)如图设计模板,A2 和 B2 单元格添加下拉框控件,C2 单元格添加文本控件,并将对应字段拖拽到A2、B2单元格。

    2)为 A2 单元格设置数据字典为 FRDemo 库中 S产品表的产品名称;为 B2 单元格设置数据字典为自定义值“是”、“否”。如下图所示:

    2.3 设置条件属性

    页面初始化时,就需要根据中止状态来控制单价控件的状态,所以需要用条件属性来实现。

    选中 C2 单元格,添加条件属性。条件为:B2="是",控件选择文本控件,取消勾选可用」设置。

    2.4 设置编辑结束事件

    选中 B2 单元格的下拉框控件,添加一个编辑结束事件。

    JavaScript 代码如下:

    var value = this.getValue();
    //获取当前控件值
    var ro = FR.cellStr2ColumnRow(this.options.location).row;
    //获取当前行号
    var widget = _g().getWidgetByCell(FR.columnRow2CellStr({
    col: 2,
    row: ro
    }));
    //获取当前行的单价控件
    value == "是" ? _g().setCellValue(0, 2, ro, "") : true;
    //如果中止为是则清除当前行的单价
    value == "是" ? widget.setEnable(false) : widget.setEnable(true);
    //如果中止为是则禁用当前行的单价控件

    2.5 效果预览

    保存模板,PC端填报预览后效果如下图所示:

    1.gif

    支持移动端预览,效果如下图所示:

    Screenshot_20220819_160137_com.finereact.v11.jpg

    3. 模板下载

    已完成模板可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填报预览JS实例\JS控制单元格控件是否可用可见.cpt

    点击下载模板:JS控制单元格控件是否可用可见.cpt

    4.  注意事项

    如果是要控制单元格控件是否可见,只需要把接口从 setEnable() 换成 setVisible() 即可。

    附件列表


    主题: 填报应用
    • 有帮助
    • 没帮助
    • 只是浏览

    售前咨询电话

    400-811-8890转1

    在线技术支持

    在线QQ:800049425

    热线电话:400-811-8890转2

    总裁办24H投诉

    热线电话:173-1278-1526

    文 档反 馈

    鼠标选中内容,快速反馈问题

    鼠标选中存在疑惑的内容,即可快速反馈问题,我们将会跟进处理。

    不再提示

    10s后关闭