1.1 问题描述

当用户做比较大的数据报表时，遇到报表的数据列比较多，想要动态选择需要的列，而且可能需要对选择的列进行查询。

1.2 解决思路

1、使用动态列实现选择的扩展列。

这里我们参考使用 函数实现动态列: https://help.fanruan.com/finereport/doc-view-1288.html?source=1

2、使用JS代码实现参数控件的隐藏显示，控制查询条件。

3、下拉框为空查询全部展示。

2.1 准备数据

打开 %FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Parameter\DynamicCol\函数实现动态列.cpt

新建数据集 ds2:

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)修改模板里单元格数据，讲A3,B3单元格ds1改成换成取数据集ds2的数据

B2：split($col,",")

A3 : ds2.select(#0)   

B3 : ds2.value(a3,b2) 

2)添加模板参数，对参数控件及对应的标签默认取消可见。修改标签控件值(修改标签值只为更明确字段，可不更改)

3)参数控件选择为下拉框，绑定数据字典。

销量、产品类型、产品、英文简称、销售员等字段同上绑定对应字段即可，排版样式按个人需求设置，在此不作过多说明。

2.3 添加事件

1) 对col控件（绑定ds1所有字段的控件）添加编辑结束事件，主要用于控制地区等参数控件的隐藏显示。

代码如下：

//获取下拉框控件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.4 效果预览

1)PC端

JS实现动态列与值查询组合应用.cpt

1)参数排版格式，按个人需求；

2)动态列可以使用条件属性实现动态列等多种方式；