反馈已提交

网络繁忙

JS实现参数联动层级限制弹出提示框

  • 文档创建者:王璐瑶
  • 编辑次数:10次
  • 最近更新:RosieY 于 2021-11-10
  • 1. 概述

    1.1 预期效果

    参数联动时,如果参数之间存在层级关系,往往需要按照层级关系来设置参数,当用户的操作不满足层级关系时,需要给出弹窗提示。

    例如下面示例中实现的效果:用户在查询时,需要按照货主地区>货主城市这样的顺序来选择参数,如果直接先选择货主城市,那么会弹出提示框,说明操作不合法。

    48B31958-4BBA-4F4F-B88C-968EEE88024F.GIF

    1.2 实现思路

    给次级参数控件添加编辑前 JS 事件,如果该控件的上级参数控件中没有内容,那么弹出非法操作提示框。

    2. 示例

    2.1 数据准备

    新建数据集 ds1,SQL 语句为:select * from 订单 where 货主地区='${货主地区}' and 货主城市='${货主城市}',如下图所示:

    Snag_692bee5.png

    新建数据集 ds2,SQL 语句为:select 货主地区 from 订单,如下图所示:

    Snag_694a6b0.png

    新建数据集 ds3,SQL 语句为:select 货主城市 from 订单 where 货主地区='${货主地区}',如下图所示:

    Snag_6955a9f.png

    2.2 设计表格

    1)设计表格样式,将对应的字段拖入表格中,如下图所示:

    Snag_69a1ed6.png

    2)将参数货主地区货主城市全部添加到参数管理面板中,并选择下拉框控件,如下图所示:

    Snag_6a0e5d2.png

    3)参数货主地区的下拉框绑定数据字典,类型设置为数据查询,数据集为 ds2 ,实际值和显示值都为货主地区,如下图所示:

    Snag_6a3a3e9.png

    4)参数货主城市的下拉框绑定数据字典,类型设置为数据查询,数据集为ds3,实际值和显示值都为货主城市,如下图所示:

    Snag_6a4ebba.png

    2.3 添加事件

    选中参数货主城市的下拉框控件,添加一个编辑前的 JS 事件,JS 代码如下:

    var a=_g().getParameterContainer().getWidgetByName('货主地区').getValue();
    if(a.length<=0){
    FR.Msg.alert("提示",'亲,请先选择货主地区哦'+a);
    };

    1576226595368826.png

    2.4 效果预览

    2.4.1 PC 端

    保存报表,点击分页预览,先下拉选择货主城市时,会弹出提示框信息“亲,请先选择货主地区哦”,按照层级关系货主地区>货主城市选择是正常的,如下图所示:

    48B31958-4BBA-4F4F-B88C-968EEE88024F.GIF

    2.4.2 移动端

    App 和 HTML5 效果如下图所示:

    1576228949812787.gif

    3. 模板下载

    已完成模板可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\参数界面JS实例\JS实现参数联动层级限制弹出提示框.cpt

    点击下载模板:JS实现参数联动层级限制弹出提示框.cpt

    附件列表


    主题: 参数应用
    • 有帮助
    • 没帮助
    • 只是浏览

    售前咨询电话

    400-811-8890转1

    在线技术支持

    在线QQ:800049425

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

    总裁办24H投诉

    热线电话:173-1278-1526

    文 档反 馈

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

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

    不再提示

    10s后关闭