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

  • 文档创建者:王璐瑶
  • 编辑次数:6次
  • 最近更新:Leo.Tsai 于 2019-12-13
  • 1. 概述

    1.1 问题描述

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

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

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

    1.2 实现思路

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

    2. 示例

    2.1 数据准备

    新建数据集 ds1,写入数据库查询语句:select * from 订单 where 货主地区='${货主地区}' and 货主城市='${货主城市}'

    Snag_692bee5.png

    新建数据集 ds2,写入数据库查询语句:select 货主地区 from 订单

    Snag_694a6b0.png

    新建数据集 ds3,写入数据库查询语句:select 货主城市 from 订单 where 货主地区='${货主地区}'

    Snag_6955a9f.png

    2.2 设计表格

    1)如下图设计表格样式。

    Snag_69a1ed6.png

    2)将参数货主地区货主城市都添加到参数管理面板。

    Snag_6a0e5d2.png

    3)参数货主地区的下拉框绑定数据字典。

    Snag_6a3a3e9.png

    4)参数货主城市的下拉框绑定数据字典。

    Snag_6a4ebba.png

    2.3 添加事件

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


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

    1576226595368826.png

    2.4 效果预览

    1)PC端

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

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

    2)移动端

    移动端效果如下图所示:

    1576228949812787.gif

    3. 模板下载

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

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


    附件列表


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