1. 概述
适用场景:安装了「FineVis数据可视化」插件的用户,可参考本文了解 FVS 模板的相关功能。
1.1 应用场景
当用户做比较大的数据报表时,遇到报表的数据列比较多,可以动态选择需要的列并查询对应的值。如下图所示:
注:使用此方案时,为了使用流畅,建议动态选择列和数据量不宜过多,否则会因为性能问题浏览不畅。
1.2 实现思路
通过 JS 代码实现参数控件的隐藏与显示,控制查询条件;通过函数和扩展实现根据查询条件动态显示列数据。
2. 示例
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移动端预览 ,效果如下图所示:
3. 模板下载
点击下载模板:FVS实现动态选择列并查询值.fvs