JS实现单选按钮组始终保持选中某一选项

编辑
  • 文档创建者:yiyemeiying
  • 浏览次数:5482次
  • 编辑次数:17次
  • 最近更新:Kevin-s 于 2019-06-21
  • 1. 描述

    在参数界面,单选按钮组在选中了一个选项后,如果用户再次点击这个选项,按钮会处于未选中状态,这样不够人性化。如果希望单选按钮组始终选中一个,这个要如何实现呢?
    设置前:

    222
    设置后:
    222

    2. 思路

    通过给控件添加【初始化后】和【状态改变】JavaScript 事件来实现!

    初始化 脚本:


    var self = this;
    //鼠标点击事件  
    this.$container.on("mousedown", function() {
        //赋值全局变量 K  
        self.options.K = self.getValue();
    })

    状态改变 脚本:


    var value=this.getValue();
    if(value=="" || value==null){
            this.setValue(this.options.K);
    }
    或者采用定位到指定控件的方法:
    var obj = this.options.form.getWidgetByName("radioGroup0");
    var value=obj.getValue();
    //不允许为空
    if(value=="" || value==null){
        this.setValue(this.options.K);  
    }else{
    this.options.K=value;
    }

    3. 操作步骤

    3.1 单选按钮组属性设置

    1)在参数面板中添加单选按钮组控件和查询控件:

    222

    2)单选按钮组控件值默认为F,定义控件的数据字典为自定义,实际值分别为 F 和 M,显示值分别为女和男,如下图所示:

    222

    3.2 添加 JavaScript 事件

    1)选中按钮,添加【初始化后】事件:

    222

    2)选中按钮,添加【状态改变】事件:

    222

    4. 预览效果

    4.1 PC 端预览效果

    222

    注:此方法不支持移动端。

    5. 已完成模板

    已完成的模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\参数界面JS实例\02-JS实现单选按钮组始终保持选中某一选项.cpt

    点击下载模板

    附件列表


    主题: 二次开发
    标签: 暂无标签
    如果您认为本文档还有待完善,请编辑

    文档内容仅供参考,如果你需要获取更多帮助,付费/准付费客户请咨询帆软技术支持
    关于技术问题,您还可以前往帆软社区,点击顶部搜索框旁边的提问按钮
    若您还有其他非技术类问题,可以联系帆软传说哥(qq:1745114201

    此页面有帮助吗?只是浏览 [ 去社区提问 ]