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

适用场景：安装了「FineVis数据可视化」插件的用户，可参考本文了解 FVS 模板的相关功能。

1.1 应用场景

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

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

1.2 实现思路

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

2.1 新建模板

1）在 FineReport 设计器左上角点击「文件>新建可视化看板」。

2）在「创建空白看板」Tab 中，可自定义模板名称和尺寸，选择 模板样式 为「内置样式>深色主题一」。

3）点击「创建看板」。

2.2 准备数据

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.3 设计表格组件

1）点击组件区「其他>表格组件」，添加到画布中，并将其拉动到合适的大小和位置。

2）选中表格组件，点击右侧配置区「内容>编辑组件」，进入表格编辑界面。

3）在单元格 A2、B1、B2 单元格中输入公式值，并添加边框。如下图所示：

B1：split($col,",")

A2 : ds2.select(#0)

B2 : ds2.value(A2,B1) 

4）设置 B1 单元格为「横向扩展」，A2单元格为「纵向扩展」。如下图所示：

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

2.4 设计控件组件

2.4.1 添加列控件

1）点击组件区「其他>标题」向画布中添加标题组件，分别设置「标题组件」的内容、组件名称，并调整到适当的位置。

以 地区 控件为例，如下图所示：

2）点击「控件>下拉框」向画布中添加下拉框控件，分别设置「下拉框控件」的绑定参数、组件名称，并调整到适当的位置。

以 area 控件为例，如下图所示：

注：必须保证下拉框控件绑定参数与参数名称一致。

3）分别为每个「下拉框控件」设置选项值来源。以 area 控件为例，步骤如下图所示：

2.4.2 添加选择列的控件

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

2）再向画布中添加一个「标题组件」和「下拉框控件」，点击「控件>查询按钮」向画布中添加查询按钮，分别调整到适当的位置。「标题组件」的内容修改为 需要选择的列 ，「下拉框控件」的绑定参数和组件名称设置为 col。如下图所示：

3）为 col 「下拉框控件」设置选项值来源。选项值来源类型选择公式，值为：TABLEDATAFIELDS("ds1")，勾选「开启多选」。如下图所示：

4）在查询按钮的关联控件列表中，选中所有控件。如下图所示：

2.4.3 隐藏列控件

同时选中地区等列控件，点击画布上方「组合」按钮，选择组合即可将这些组件合并成组。将该组合设置为不可见，即初始化时隐藏，后面将通过添加 JS 的方式，根据选择显示出来。如下图所示：

2.5 添加JS事件

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

JavaScript 代码如下：

//获取下拉框控件area
var area = duchamp.getWidgetByName("area");
//获取下拉框控件xl
var xl = duchamp.getWidgetByName("xl");
//获取下拉框控件cplx
var cplx = duchamp.getWidgetByName("cplx");
//获取下拉框控件cp
var cp = duchamp.getWidgetByName("cp");
//获取下拉框控件ywjc
var ywjc = duchamp.getWidgetByName("ywjc");
//获取下拉框控件xsy
var xsy = duchamp.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);
    duchamp.getWidgetByName("地区标题").setVisible(true);
} else {    
    area.setVisible(false);
    duchamp.getWidgetByName("地区标题").setVisible(false);
}
	if(a2) {
    xl.setVisible(true);
    duchamp.getWidgetByName("销量标题").setVisible(true);
} else {    
    xl.setVisible(false);
    duchamp.getWidgetByName("销量标题").setVisible(false);
}
if(a3) {
    cplx.setVisible(true);
    duchamp.getWidgetByName("产品类型标题").setVisible(true);
} else {    
    cplx.setVisible(false);
    duchamp.getWidgetByName("产品类型标题").setVisible(false);
}
if(a4) {
    cp.setVisible(true);
    duchamp.getWidgetByName("产品标题").setVisible(true);
} else {    
    cp.setVisible(false);
    duchamp.getWidgetByName("产品标题").setVisible(false);
}
if(a5) {
    ywjc.setVisible(true);
    duchamp.getWidgetByName("英文简称标题").setVisible(true);
} else {    
    ywjc.setVisible(false);
    duchamp.getWidgetByName("英文简称标题").setVisible(false);
}
if(a6) {
    xsy.setVisible(true);
    duchamp.getWidgetByName("销售员标题").setVisible(true);
} else {    
    xsy.setVisible(false);
    duchamp.getWidgetByName("销售员标题").setVisible(false);
}
显示代码

2.6 触发列控件与表格联动

value 函数在 FVS 模板中直接使用于控件和表格组件之间时，不会触发联动效果，可使用公式 $area 取值触发联动。详情参见具体文档： value函数在FVS/决策报表中无联动效果。

1）选中表格组件，点击右侧配置区「内容>编辑组件」，进入表格编辑界面。

2）以列控件的参数 area 为例，在右侧任意单元格插入公式：$area，其余五个参数操作相同，如下图所示：

3）选中需要隐藏的列标签，右击，在弹出菜单中选择隐藏。如下图所示：

2.7 效果预览

2.7.1 PC 端

保存模板，点击「预览」，PC 端效果如本文 1.2 节所示。

2.7.2 移动端

移动端请自行组合组件并开启 移动端布局 ，预览方式请参考 FVS移动端预览 ，效果如下图所示：

点击下载模板：FVS实现动态选择列并查询值.fvs