反馈已提交

网络繁忙

当前为10.0版本文档,只有最新版本的文档支持在线编辑修改,如果想创建/编辑文档,请移步至 最新版帮助文档

JS实现动态选择列并查询值

  • 文档创建者:xiaomage001
  • 历史版本:4
  • 最近更新:RosieY 于 2022-07-04
  • 1. 概述

    1.1 预期效果

    当用户做比较大的数据报表时,遇到报表的数据列比较多,可以动态选择需要的列并查询对应的值。如下图所示:

    注:使用此方案时,为了使用流畅,建议动态选择列和数据量不宜过多,否则会因为性能问题浏览不畅。

    XGZS.gif

    1.2 实现思路

    通过 JS 代码实现参数控件的隐藏与显示,控制查询条件;通过函数和扩展实现根据查询条件动态显示列数据。

    2. 示例

    2.1 准备数据集

    1)新建模板,新建数据集 ds1 用来给参数控件绑定数据字典,SQL 语句为: select * from 销量

    2)新建数据集 ds2 用来拖入单元格中作为报表数据值,SQL 语句为:

    select * from 销量

    where 1=1

    ${if(len(area) == 0,"","and 地区 = '" +area + "'")} 

    ${if(len(xsy) == 0,"","and 销售员 = '" +xsy + "'")} 

    ${if(len(cplx) == 0,"","and 产品类型 = '" +cplx + "'")} 

    ${if(len(cp) == 0,"","and 产品 = '" +cp + "'")} 

    ${if(len(xl) == 0,"","and 销量 = '" +xl + "'")} 

    ${if(len(ywjc) == 0,"","and 英文简称 = '" +ywjc + "'")} 

    如何定义数据集参数可参考:数据集参数

    2.2 设计报表

    1)在单元格 A2、B1、B2 单元格中输入公式值,并添加边框。如下图所示:

    B1:split($col,",")

    A2 : ds2.select(#0)   

    B2 : ds2.value(A2,B1) 

    2)设置 B2 单元格为「横向扩展」,A2单元格为「纵向扩展」。如下图所示:

    以上便完成表格的设计,预览时表格内容会跟随参数值变化。相关简单示例可参考:使用函数实现动态列

    2.3 添加参数控件

    参数面板区域的控件有选择展示那些列的控件和筛选列数据的控件。如下图所示:

    2.3.1 添加列控件

    1)点击模板「参数面板」区域,给 2.1 节中定义的数据集参数都添加参数控件。如下图所示,为 area 参数添加到参数面板。

    2)修改所有控件的类型为「下拉框控件」。如下图所示:

    3)为方便查看,修改每个「标签控件」的值。如下图所示:

    4)分别为每个「下拉框控件」绑定数据字典,如下图所示,为 area 控件绑定数据字典。

    2.3.2 添加选择列的控件

    1)点击菜单栏「模板>模板参数」,添加一个模板参数 col。如下图所示:

    2)将模板参数 col 也添加到参数面板,选择控件类型为「下拉复选框控件」,再将对应的「标签控件」值修改为「需要选择的列」。如下图所示:

    3)为 col 「下拉复选框控件」绑定数据字典。数据字典类型选择公式,值为:TABLEDATAFIELDS("ds1") 。如下图所示:

    2.3.3 隐藏列控件

    将地区等列控件全部设置为不可见,即初始化时隐藏,后面将通过添加 JS 的方式,根据选择显示出来。如下图所示:

    2.4 添加 JS 事件

    给 col 「下拉复选框控件」添加一个「编辑结束」事件,主要用于控制地区等参数控件的隐藏显示。如下图所示:

    JavaScript 代码如下:

    //获取下拉框控件area
    var area = this.options.form.getWidgetByName("area");
    //获取下拉框控件xl
    var xl = this.options.form.getWidgetByName("xl");
    //获取下拉框控件cplx
    var cplx = this.options.form.getWidgetByName("cplx");
    //获取下拉框控件cp
    var cp = this.options.form.getWidgetByName("cp");
    //获取下拉框控件ywjc
    var ywjc = this.options.form.getWidgetByName("ywjc");
    //获取下拉框控件xsy
    var xsy = this.options.form.getWidgetByName("xsy");
    //获取下拉框选中值
    var a = this.getValue();
    //判断a中是否包含对应的字段,返回true或false
    var a1 = a.includes("地区");
    var a2 = a.includes("销量");
    var a3 = a.includes("产品类型");
    var a4 = a.includes("产品");
    var a5 = a.includes("英文简称");
    var a6 = a.includes("销售员");
    //alert(a1,a2,a3,a4,a5,a6);
    //对不同的控件设置隐藏显示
    if(a1) {
        area.setVisible(true);
        this.options.form.getWidgetByName("Labelarea").setVisible(true);
    } else {    
        area.setVisible(false);
        this.options.form.getWidgetByName("Labelarea").setVisible(false);
    }
    if(a2) {
        xl.setVisible(true);
        this.options.form.getWidgetByName("Labelxl").setVisible(true);
    } else {    
        xl.setVisible(false);
        this.options.form.getWidgetByName("Labelxl").setVisible(false);
    }
    if(a3) {
        cplx.setVisible(true);
        this.options.form.getWidgetByName("Labelcplx").setVisible(true);
    } else {    
        cplx.setVisible(false);
        this.options.form.getWidgetByName("Labelcplx").setVisible(false);
    }
    if(a4) {
        cp.setVisible(true);
        this.options.form.getWidgetByName("Labelcp").setVisible(true);
    } else {    
        cp.setVisible(false);
        this.options.form.getWidgetByName("Labelcp").setVisible(false);
    }
    if(a5) {
        ywjc.setVisible(true);
        this.options.form.getWidgetByName("Labelywjc").setVisible(true);
    } else {    
        ywjc.setVisible(false);
        this.options.form.getWidgetByName("Labelywjc").setVisible(false);
    }
    if(a6) {
        xsy.setVisible(true);
        this.options.form.getWidgetByName("Labelxsy").setVisible(true);
    } else {    
        xsy.setVisible(false);
        this.options.form.getWidgetByName("Labelxsy").setVisible(false);
    }

    2.5 效果预览

    保存模板,点击「分页预览」,PC 端效果如下图所示:

    XGZS.gif

    注:不支持移动端

    3. 模板下载

    已完成模板可参考:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\分页预览JS实例\JS实现动态选择列并查询值.cpt

    点击下载模板:JS实现动态选择列并查询值.cpt

    附件列表


    主题: 参数应用
    已经是第一篇
    已经是最后一篇
    • 有帮助
    • 没帮助
    • 只是浏览

    售前咨询电话

    400-811-8890转1

    在线技术支持

    请前往「服务平台」,选择「在线支持」

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

    总裁办24H投诉

    热线电话:173-1278-1526